العنصر الزائف ::after في CSS (أي pseudo-element) هو آخر عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية conten
العنصر ::after في Css
a::after {
content: "→";
}
الشكل العام لهذا المحدد:
::after
:after
لاحظ أنَّ CSS3 أضافت الشكل::after(لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل:afterالمُضاف في CSS2 أيضًا.
العناصر الزائفة الموّلدة من ::after و ::before ستكون محتواة داخل صندوق العنصر، وبالتالي لا يمكن تطبيقهما على العناصر المُستبدَلة مثل <img> أو <br>.
أمثلة
مثال عن استخدام هذا العنصر الزائف لإنشاء إشارة إلى العناصر في نهايتها:
<p class="boring-text">هنا بعض الكلام القديم الممل </p>
<p>هنا بعض النصوص العادية التي ليست مملة ولا مثير</p>
<p class="exciting-text">هنا بعض النصوص المثيرة</p>
شيفرة CSS:
.exciting-text::after {
content: "<- now this *is* exciting!";
color: green;
}
.boring-text::after {
content: "<- BORING!";
color: red;
}
لاحظ كيف يمكننا تنسيق النصوص والصور المُضافة عبر الخاصية content كما نشاء:
<span class="ribbon">لاحظ أين المربع البرتقالي</span>
شيفرة CSS:
.ribbon {
background-color: #5BC8F7;
}
.ribbon::after {
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