الصيغة المزيفة CSS ::before

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

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