pseudo-element ::marker CSS

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

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

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

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

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

مثال

مثال 1

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

::marker {
  font-size: 20px;
  رنگ: red;
}

آزمایش کنید

مثال 2

محتوای، رنگ و اندازه فونت نشانه‌های لیست عناصر <ul> را تنظیم کنید:

ul li::marker {
  محتوای: "@ ";
  رنگ: pink;
  font-size: 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;
}

جزئیات فنی

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

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

صفحات مرتبط

مقدمه:عنصر فرضی CSS