43. العناصر الزائفة: تنسيق المحتوى المُولد

تقوم العناصر الزائفة بتنسيق أجزاء من العنصر أو إدراج محتوى قبل أو بعد العنصر. يتم تحديدها بنقطتين رأسيتين مزدوجتين (::).

1. ::before و ::after

تدرج هذه العناصر محتوى مباشرة قبل أو بعد محتوى العنصر المحدد.

شرط حاسم: يجب أن يكون لدى ::before و ::after خاصية content محددة، حتى لو كانت القيمة سلسلة فارغة (content: '';).

css .quote-block::before { content: '“'; /* يدرج علامة اقتباس افتتاحي / font-size: 4rem; color: #ccc; display: block; / يسمح بالتحكم في الموضع */ float: left; }

.link::after { content: ' ←'; /* يضيف سهماً بعد الرابط */ }

الاستخدامات الشائعة:

• إضافة أيقونات أو أسهم أو نصوص زخرفية.
• إنشاء أشكال مرئية (مثل المثلثات، تأثيرات التسطير).
• الـ clearfix hack (تاريخياً، على الرغم من أن Flexbox/Grid ألغيا الحاجة إليها).

2. ::first-line و ::first-letter

تنسق هذه العناصر السطر الأول أو الحرف الأول فقط من عنصر على مستوى الكتلة، وغالباً ما تستخدم للحروف الاستهلالية الكبيرة بأسلوب المجلات.

css article p::first-letter { font-size: 3rem; font-weight: bold; color: navy; float: left; /* يسحب الحرف للخارج لتأثير الحرف الاستهلالي */ margin-right: 5px; }