pseudo-element ::marker CSS

تعریف و استفاده

CSS ::marker pseudo-element برای تنظیم استایل برچسب‌های آیتم‌های لیست استفاده می‌شود.

این pseudo-element برای هر عنصری که display: list-item تنظیم شده است، کاربرد دارد.

توجه:این ویژگی‌ها می‌توانند با ::marker استفاده مشترک:

  • تمام ویژگی‌های فونت
  • تمام ویژگی‌های انیمیشن
  • تمام ویژگی‌های انتقال
  • رنگ
  • white-space
  • محتوای
  • text-combine-upright
  • unicode-bidi
  • جهت

مثال

مثال 1

برای همه برچسب‌های آیتم‌های لیست رنگ و اندازه فونت تنظیم کنید:

::marker {
  حجم فونت: 20px;
  رنگ: red;
}

آزمایش کنید

مثال 2

برای برچسب‌های آیتم‌های لیست <ul> محتوا، رنگ و اندازه فونت تنظیم کنید:

ul li::marker {
  محتوای: "@ ";
  رنگ: pink;
  حجم فونت: 25px;
}

آزمایش کنید

مثال 3

عنصر <h2> را به display: list-item تنظیم کنید و برای برچسب‌های آیتم‌های لیست محتوا و رنگ تنظیم کنید:

h2 {
  counter-increment: h2;
  نمایش: list-item;
}
h2::marker {
  نمایش: list-item;
  محتوای: "@" counter(h2) " ";
  رنگ: lightgreen;
}
body {
  counter-reset: h2;
  font-family: verdana;
  حاشیه: 50px;
}

آزمایش کنید

زبان CSS

::marker {
  اظهارات css;
}

جزئیات فنی

نسخه: CSS3

پشتیبانی مرورگر

اعداد در جدول نسخه اولین مرورگر را نشان می‌دهد که از این پseudo-element پشتیبانی می‌کند.

کروم ایج فایرفاکس سافاری اپرا
86 86 68 18.1 72

صفحات مرتبط

تدریس:CSS سدک