الصيغة الزائدة ::before في CSS

التعريف والاستخدام

CSS ::before الصيغة الزائدة تستخدم لضبط بعض المحتوى قبل محتوى العنصر المحدد.

استخدام content تحديد المحتوى المضاف. يمكن أن تكون قيمة content ما يلي:

• السلسلة النصية: content: "Hello world!";
• الصورة: content: url(myimage.jpg);
• بدون محتوى: content: none;
• المحاسبة: content: counter(li);
• القووس: content: open-quote;
• قيمة الخاصية: content: " (" attr(href) ")";

نصيحة:لاحظ أن المحتوى المضاف يبقى داخل العنصر المحدد. سيتم إضافة المحتوى المضاف قبل المحتوى الأخر داخل العنصر.

استخدام ::after أضف بعض المحتوى بعد محتوى العنصر المحدد.

مثال

مثال 1

أضف سلسلة نصية قبل محتوى كل عنصر <p>:

p::before {
  content: "اقرأ هذا: ";
}

جرب بنفسك

مثال 2

أضف سلسلة نصية قبل محتوى كل عنصر <p> وقم بتعيين نمط المحتوى المضاف:

p::before {
  content: "اقرأ هذا -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

جرب بنفسك

نحو اللغة CSS

::before {
  إعلانات css;
}

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم هذا الصيغة الزائدة بشكل كامل.

الصفحات ذات الصلة

دليل:الصيغة الزائدة CSS

المرجع:الصيغة الزائدة ::after