العنصر ‎::before

من موسوعة حسوب
< CSS
مراجعة 11:27، 31 أكتوبر 2017 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث

العنصر الزائف ‎::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>Some quotes,</q> he said, <q>are better than none.</q>

شيفرة CSS:

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

لاحظ كيف يمكننا تنسيق النصوص والصور المُضافة عبر الخاصية content كما نشاء:

<span class="ribbon">Notice where the orange box is.</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 الحركات والانتقالات مع هذا العنصر الزائف.

مصادر ومواصفات