أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.
العنصر::before
العنصر الزائف ::before
في CSS (أي pseudo-element) هو أوّل عنصر ابن للعنصر المُحدَّد،
ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content
، وهو عنصرٌ سطريٌ افتراضيًا.
a::before { content: "♥"; }
الشكل العام لهذا المحدد:
::before :before
لاحظ أنَّ CSS3 أضافت الشكل ::before
(لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة
(pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات
تقبل الشكل :before
المُضاف في CSS2 أيضًا.
العناصر الزائفة الموّلدة من ::after
و ::before
ستكون محتواة داخل صندوق العنصر، وبالتالي لا يمكن تطبيقهما على
العناصر المُستبدَلة مثل <img>
أو <br>
.
أمثلة
مثال بسيط عن العنصر الزائف ::before
لإضافة علامات اقتباس، لاحظ أننا استخدمنا العنصرين ::before
و ::after
لإضافة علامات الاقتباس قبل وبعد العنصر <q>
:
<q> بعض الاقتباسات ، </q> قال ، <q> أفضل من لا شيء. </q>
شيفرة CSS:
q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; }
لاحظ كيف يمكننا تنسيق النصوص والصور المُضافة عبر الخاصية content
كما نشاء:
<span class="ribbon">لاحظ أين المربع البرتقالي</span>
شيفرة CSS:
.ribbon { background-color: #5BC8F7; } .ribbon::before { content: "Look at this orange box."; background-color: #FFBA10; border-color: black; border-style: dotted; }
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي (:after) | مدعومة | مدعومة | 8.0 | 4.0 | 4.0 |
الدعم الأساسي (::after) | مدعومة | مدعومة | 9.0 | 7.0 | 4.0 |
دعم الحركات والانتقالات | 26.0 | 4.0 | غير مدعومة | غير مدعومة | غير مدعومة |
على النقيض من متصفح IE، يدعم متصفح Edge الحركات والانتقالات مع هذا العنصر الزائف.
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS