ما هي العناصر الزائفة (Pseudo-elements) مثل ::before و ::after؟

Question

Accepted Answer

يقوم العنصر الزائف **pseudo-element** (بنقطتين `::`) بتنسيق *جزء* محدد من عنصر، أو **إنشاء محتوى** غير موجود في HTML — دون إضافة تعليمات برمجية إضافية. ## ::before و ::after — محتوى مُنشأ ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` خاصية `content` إلزامية — بدونها، العنصر الزائف لا يُعرض. المحتوى المُنشأ هو عنصر فرعي في البداية جداً (`::before`) أو النهاية (`::after`) من العنصر. ## أشكال زخرفية بدون divs إضافية ```css .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 خالية من العناصر البصرية فقط. ## عناصر زائفة أخرى (تنسيق جزء من عنصر) ```css 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 */ ``` ## نقطة واحدة مقابل نقطتين ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` قدمت CSS3 `::` للتمييز بين العناصر الزائفة والفئات الزائفة (المتصفحات تقبل النقطة الواحدة على الفئات القديمة للتوافقية، لكن استخدم `::`) ## ملاحظة حول الوصول المحتوى المُنشأ يتم قراءته بواسطة بعض برامج القراءة — لا تضع معلومات أساسية فقط في `::before`/`::after` (استخدمه للزخرفة)، والرموز الزخرفية من الأفضل استبعادها من شجرة إمكانية الوصول. ## لماذا يهم هذا تسمح لك العناصر الزائفة بإضافة الرموز والأشكال الزخرفية (الأسهم والفواصل) والحروف الأولى الكبيرة والعدادات بشكل كامل في CSS — بدون `

`s أو ``s إضافية. تحافظ على العلامات الدلالية مع تمكين التفاصيل البصرية الغنية، وهي أساسية للتنسيق النظيف والقابل للصيانة.