بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
Pseudo Elements من المعرفات المعقدة في css ، وتستخدم لتخصيص جزء من العنصر بتأثير معين أو الإضافة في أوله أو آخره ، مثلا يمكن التأثير في الحرف الأول من النص أو السطر الأول كما يمكن الإضافة في أول النص أو آخره.
الصيغة العامة لكتابة pseudo element
before و after
يستخدم العنصر before للإضافة في أول النص وتنسيق المحتوى المضاف ، بينما العنصر after عكسه تماما يضيف في آخر النص.
لنجرب ذلك مع كود html التالي:
والتنسيق التالي:
والنتيجة:
كما ترى أضفنا كلمة Abdellah في آخر الفقرة الأولى وفي أول الفقرة الثانية ونسقناهما ، لاحظ أيضا بأننا عندما استخدمنا الخاصية content وأعطيناها القيمة النصية أضفنا فراغا في أول النص مع before وفراغا في آخر النص مع after حتى لا يلتصق النص المضاف مع النص الموجود ، والفراغ يعتبره المتصفح جزءا من النص.
first-line
تستخدم لتخصيص السطر الأول من النص بتنسيق معين.
لنجرب ذلك مع كود html التالي:
والتنسيق التالي:
وهذه هي النتيجة:
وتقبل first-line استخدام الخصائص التالية:
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
first-letter
تستخدم لتخصيص الحرف الأول من النص بتنسيق معين ، وتستخدم مع النصوص الأجنبية .
ليكن كود html التالي:
والتنسيق التالي:
وهذه هي النتيجة:
وتقبل first-letter تأثيرات الخصائص التالية:
color
background
padding
margin
border
text-decoration
float
vertical-align (فقط عندما يكون float غائبا أو بالقيمة none)
text-transform
line-height
نكتفي بهذا القدر ، سنواصل إن شاء الله في الدروس القادمة مع أنواع جديدة من المعرفات المعقدة ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.