مزيج من الصيغة ::marker CSS

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

CSS ::marker يستخدم المزيج من الصيغة لتحديد النمط لعلامات العناصر المدرجة في القائمة.

هذا المزيج من الصيغة ينطبق على أي عنصر تم تعيينه display: list-item.

ملاحظة:يمكن استخدام المزايا التالية مع ::marker استخدام معًا:

• جميع خصائص الخط
• جميع خصائص التحرك
• جميع خصائص التحويل
• color
• white-space
• content
• text-combine-upright
• unicode-bidi
• اتجاه

مثال

مثال 1

إعداد لون و حجم الخط لجميع علامات العناصر المدرجة في القائمة:

::marker {
  font-size: 20px;
  color: red;
}

تجربة بنفسك

مثال 2

إعداد محتوى، لون، و حجم الخط لعلامات العناصر المدرجة في قائمة <ul>:

ul li::marker {
  content: "@ ";
  color: pink;
  font-size: 25px;
}

تجربة بنفسك

مثال 3

اعتماد عناصر <h2> لـ display: list-item، وإعداد محتوى وتفضيلات اللون لعلامات العناصر المدرجة في القائمة:

h2 {
  counter-increment: h2;
  display: list-item;
}
h2::marker {
  display: list-item;
  content: "@" counter(h2) " ";
  color: lightgreen;
}
body {
  counter-reset: h2;
  font-family: verdana;
  margin: 50px;
}

تجربة بنفسك

قواعد اللغة CSS

::marker {
  تعريفات css;
}

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

دعم المتصفح

الرقم في الجدول يحدد إصدار المتصفح الأول الذي يدعم هذا المزيج من الصيغة.

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

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