يقوم العنصر الزائف pseudo-element (بنقطتين ::) بتنسيق جزء محدد من عنصر، أو إنشاء محتوى غير موجود في HTML — دون إضافة تعليمات برمجية إضافية.
::before و ::after — محتوى مُنشأ
{
: ;
}
{
: ;
}
يقوم العنصر الزائف pseudo-element (بنقطتين ::) بتنسيق جزء محدد من عنصر، أو إنشاء محتوى غير موجود في HTML — دون إضافة تعليمات برمجية إضافية.
{
: ;
}
{
: ;
}
خاصية content إلزامية — بدونها، العنصر الزائف لا يُعرض. المحتوى المُنشأ هو عنصر فرعي في البداية جداً (::before) أو النهاية (::after) من العنصر.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
هذا هو الاستخدام الكلاسيكي: رسم الأسهم والشارات والطبقات الفوقية والخطوط الزخرفية — مع الحفاظ على HTML خالية من العناصر البصرية فقط.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
قدمت CSS3 :: للتمييز بين العناصر الزائفة والفئات الزائفة (المتصفحات تقبل النقطة الواحدة على الفئات القديمة للتوافقية، لكن استخدم ::)
المحتوى المُنشأ يتم قراءته بواسطة بعض برامج القراءة — لا تضع معلومات أساسية فقط في ::before/::after (استخدمه للزخرفة)، والرموز الزخرفية من الأفضل استبعادها من شجرة إمكانية الوصول.
تسمح لك العناصر الزائفة بإضافة الرموز والأشكال الزخرفية (الأسهم والفواصل) والحروف الأولى الكبيرة والعدادات بشكل كامل في CSS — بدون <div>s أو <span>s إضافية.
تحافظ على العلامات الدلالية مع تمكين التفاصيل البصرية الغنية، وهي أساسية للتنسيق النظيف والقابل للصيانة.