| العنصر الزائف | طريقة العمل والتأثير | الاستخدام الشائع والمفيد |
|---|---|---|
| before و after | يضيفان عنصراً افتراضياً قبل أو بعد المحتوى ويتطلبان سمة content | إضافة أيقونات صغيرة بجانب العناوين أو وضع خلفيات وتأثيرات جمالية للأزرار |
| placeholder | ينسق النص التوضيحي المؤقت الموجود داخل حقول الإدخال | تغيير لون وحجم الخط التوضيحي داخل النماذج ليتناسب مع هوية الموقع |
| selection | ينسق النص الذي يقوم زائر الموقع بتظليله وتحديده بالفأرة | تغيير لون خلفية النص المحدد ولون الخط ليعطي لمسة جمالية عند نسخ النصوص |
| first-line | ينسق السطر الأول من الفقرة النصية أو المقال تلقائياً | تمييز بداية المقالات بجعل السطر الأول بلون مختلف أو بخط عريض |
| first-letter | ينسق الحرف الأول فقط من الكلمة الأولى في الفقرة | تكبير الحرف الأول في بداية المقالات الإنجليزية ليعطي مظهراً صحفياً كلاسيكياً |
| marker | ينسق نقطة أو رقم العنصر في القوائم المرتبة وغير المرتبة | تغيير ألوان وأشكال النقاط أو الأرقام الافتراضية في القوائم لجعلها أكثر جاذبية |
العناصر الزائفة (Pseudo-elements) تتيح إضافة أجزاء افتراضية إلى العناصر أو تنسيق أجزاء بعينها من محتواها.
**::before و ::after** أكثر العناصر الزائفة استخداماً. يُضيفان عنصراً افتراضياً قبل أو بعد محتوى العنصر. يتطلبان خاصية `content` (حتى لو كانت فارغة).
**::placeholder** ينسّق نص placeholder في حقول الإدخال.
**::selection** ينسّق النص الذي يختاره المستخدم بالتظليل.
**::first-line** ينسّق أول سطر من فقرة نصية.
**::first-letter** ينسّق أول حرف (مفيد للـ Drop cap).
**::marker** ينسّق نقطة أو رقم العنصر في القائمة.
| 1 | /* عنصر قبل */ |
| 2 | .badge::before { content: "★ "; color: gold; } |
| 3 | |
| 4 | /* نص placeholder */ |
| 5 | input::placeholder { color: #94a3b8; font-style: italic; } |
| 6 | |
| 7 | /* تظليل النص */ |
| 8 | ::selection { background: #3b82f6; color: white; } |
| 9 | |
| 10 | /* أول حرف */ |
| 11 | p::first-letter { font-size: 2em; float: left; margin-right: 4px; } |
مثال 1: فاصل زخرفي بـ ::before و ::after
| 1 | .section-title { |
| 2 | position: relative; |
| 3 | text-align: center; |
| 4 | padding: 0 20px; |
| 5 | } |
| 6 | |
| 7 | .section-title::before, |
| 8 | .section-title::after { |
| 9 | content: ""; |
| 10 | position: absolute; |
| 11 | top: 50%; |
| 12 | width: 30%; |
| 13 | height: 1px; |
| 14 | background: #e2e8f0; |
| 15 | } |
| 16 | |
| 17 | .section-title::before { left: 0; } |
| 18 | .section-title::after { right: 0; } |
مثال 2: أيقونة تلقائية قبل الروابط الخارجية
| 1 | a[href^="http"]::after { |
| 2 | content: " ↗"; |
| 3 | font-size: 0.75em; |
| 4 | vertical-align: super; |
| 5 | color: #94a3b8; |
| 6 | } |