العناصر الزائفة في لغة CSSCSS Pseudo-Elements

بينما تستخدم الفئة الزائفة نقطتين مفردتين مثل :hover أو :focus لاستهداف عنصر موجود بالكامل عندما يمر بحالة تفاعلية معينة، يستخدم العنصر الزائف نقطتين مزدوجتين مثل ::before أو ::first-line لاستهداف جزء فرعي محدد داخل العنصر أو توليد صندوق زخرفي افتراضي بداخله.

يمنح هذا التفريق البصري بالنقطتين المزدوجتين وضوحاً فورياً عند قراءة الكود؛ فالنقطتان المفردتان تعنيان حالة العنصر، أما النقطتان المزدوجتان فتعنيان جزءاً بصرياً فرعياً يُنسق دون تلويث ملف HTML بوسوم <span> شكلية فائضة.

ينشئ العنصران الزائفان ::before و::after صندوقين افتراضيين باعتبارهما الابن الأول والابن الأخير داخل العنصر المستهدف. ولا يُرسم أي منهما في التخطيط ما لم تصرح بخاصية content؛ إذ يؤدي إغفالها أو إعطاؤها القيمة content: none إلى عدم توليد الصندوق من الأساس.

عند رسم زخارف هندسية خالصة مثل النقاط الملونة للحالة أو الخطوط التزيينية تحت العناوين، نكتب نصاً فارغاً content: "" ثم نمنحه أبعاداً ولون خلفية مع display: inline-block أو تموضع مطلق. وانتبه إلى أن العناصر المستبدلة أو الفارغة مثل <img> و<input> و<br> لا تملك حاوية محتوى داخلية، لذا لا يعمل عليها ::before ولا ::after.

بدلاً من تثبيت كلمات جامدة داخل ملف الأنماط، تقرأ دالة content: attr(data-badge) قيمة السمة المكتوبة على وسم HTML وتعرضها بصرياً، كما يمكنك دمج نصوص ثابتة مع قيمة السمة في سطر واحد تفصل بينها مسافات مثل content: " [" attr(data-lang) "]".

وفي الاقتباسات النصية بوسم <q> أو بطاقات الاستشهاد، يتيح الجمع بين خاصية quotes وقيمتي open-quote وclose-quote مطابقة علامات التنصيص للغة المحتوى تلقائياً، فتظهر علامات التنصيص الإنجليزية المنحنية في النصوص اللاتينية وتظهر الشوكتان العربيتان المزدوجتان «...» في النصوص العربية.

تعتمد المقالات التحريرية كثيراً على إبراز بداية النص عبر ::first-line لتنسيق السطر الافتتاحي و::first-letter لتكبير الحرف الاستهلالي. ويعمل كلا العنصرين حصرياً على الحاويات الكتلية مثل <p> ولا يعملان على العناصر السطرية الصرفة display: inline. وبما أن طول السطر الأول يتغير بتغير عرض الشاشة، يعيد المتصفح حساب الكلمات المشمولة بتنسيق ::first-line لحظياً عند تكبير النافذة أو تصغيرها.

ورغم جمال الحرف الاستهلالي العائم عبر ::first-letter في المقالات الإنجليزية، يجب الحذر الشديد عند تطبيقه على النصوص العربية؛ لأن الحروف العربية متصلة بطبيعتها داخل الكلمة الواحدة، وفصل الحرف الأول بصندوق عائم أو حشوة جانبية قد يكسر اتصال الحرف بما بعده في بعض المحركات، لذا يُفضل في العربية الاكتفاء بتمييز السطر الأول عبر ::first-line.

في السابق كان تغيير لون نقاط القائمة أو أرقامها بمعزل عن لون النص الداخلي يضطر المطور إلى إلغاء التعداد الأصلي عبر list-style: none ثم إعادة رسمه يدوياً باستخدام li::before. أما اليوم فيستهدف العنصر الزائف li::marker صندوق الرمز أو الرقم الأصلي المولد تلقائياً لعناصر القوائم بصورة مباشرة.

يتيح لك li::marker تغيير اللون عبر color وضبط حجم الخط وسماكته أو حتى استبدال الرمز بنص مخصص مثل content: "+ " مع الحفاظ الكامل على محاذاة القائمة الأصلية ودلالتها لدى قارئات الشاشة.

يمنح عنصران زائفان إضافيان صقلاً واضحاً لتجربة القراءة والإدخال في الواجهات. أولهما ::placeholder لتنسيق النص الإرشادي المؤقت داخل حقول <input> و<textarea> الفارغة؛ وبما أن بعض المتصفحات تخفض شفافيته افتراضياً، فإن ضبط opacity: 1 مع لون هادئ متوازن يضمن ثبات التباين في كل المتصفحات دون إرباك المستخدم بأن الحقل مملوء مسبقاً.

وثانيهما ::selection الذي يخصص لون الخلفية background-color ولون النص color عندما يظلل القارئ فقرة بالفأرة أو بلوحة المفاتيح، بشرط الحفاظ على نسبة تباين لا تقل عن 4.5:1 لضمان سهولة القراءة.

يقع كثير من المطورين في خطأ خفي عند كتابة * { box-sizing: border-box; } بمفردها؛ فالمحدد الشامل * يطابق عناصر شجرة المستند الحقيقية فقط ولا يشمل ::before أو ::after! ونتيجة لذلك يعود أي صندوق زخرفي بعرض width: 100% وحشوة داخلية إلى نموذج content-box فيتجاوز حدود حاويته.

لذلك فإن ترقية قاعدة التأسيس في مشاريعك إلى *, *::before, *::after { box-sizing: border-box; } تضمن خضوع جميع الصناديق الحقيقية والمولدة لحساب أبعاد موحد ودقيق.

عند فحص عنصر في أدوات المطور داخل المتصفح وتوسيع وسمه في لوحة العناصر، تظهر عقدتا ::before و::after لتسهيل معاينة أبعادهما وألوانهما المحسوبة. غير أن المحتوى المولد عبر CSS لا يعد جزءاً حقيقياً من شجرة المستند؛ فلا يستطيع الزائر تظليله ونسخه بالمؤشر، ولا تعتمد عليه محركات البحث بوصفه نصاً أساسياً في الصفحة.

لذلك التزم دائماً بقاعدة إمكانية الوصول القياسية: اجعل ::before و::after للزخرفة البصرية أو التعزيز الإضافي فقط، ولا تضع معلومات جوهرية كالأسعار أو التحذيرات أو معاني الإلزام حصرياً داخل خاصية content دون وجود نص حقيقي في المستند.