گلوله های سفارشی با CSS :: نشانگر

آدام آرگایل
اوریول بروفائو
Oriol Brufau
GitHub

منتشر شده: ۲ سپتامبر ۲۰۲۰

Browser Support

  • کروم: ۸۶.
  • لبه: ۸۶.
  • فایرفاکس: ۶۸.
  • سافاری: ۱۱.۱.

Source

CSS ::marker به شما امکان می‌دهد محتوا و برخی از سبک‌های بولت‌ها و اعداد را در لیست‌های HTML تغییر دهید.

نمونه‌هایی از سبک‌های گلوله. مشاهده منبع

مقدمه‌ای بر شبه عناصر

یک شبه عنصر بخشی از سند را نشان می‌دهد که در درخت سند نمایش داده نمی‌شود. برای مثال، می‌توانید خط اول یک پاراگراف را با استفاده از شبه عنصر p::first-line انتخاب کنید، حتی اگر هیچ عنصر HTML آن خط از متن را در بر نگرفته باشد.

لیست نامرتب HTML زیر را در نظر بگیرید:

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
  <li>Dolores quaerat illo totam porro</li>
  <li>Quidem aliquid perferendis voluptates</li>
  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit
      consequatur alias facilis rem</li>
  <li>Fuga</li>
</ul>

که با استایل پیش‌فرض به صورت زیر رندر می‌شود:

نقطه‌ای که در ابتدای هر عنصر <ul> قرار دارد، به عنوان بخشی از رندر کردن لیست تولید می‌شود و عنصر HTML مخصوص به خود را ندارد. ::marker یک شبه عنصر است که نشان‌دهنده آن نقطه یا عدد ابتدای یک عنصر لیست مرتب شده است.

ایجاد یک نشانگر

کادر نشانگر شبه عنصر ::marker به طور خودکار در داخل هر عنصر آیتم لیست، قبل از محتوای واقعی و شبه عنصر ::before ایجاد می‌شود.

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}

آیتم‌های لیست معمولاً عناصر HTML <li> هستند، اما می‌توانید display: list-item برای تبدیل سایر عناصر به آیتم‌های لیست استفاده کنید.

<dl>
  <dt>Lorem</dt>
  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
  <dd>Dolores quaerat illo totam porro</dd>

  <dt>Ipsum</dt>
  <dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  display: list-item;
  list-style-type: "🤯";
  padding-inline-start: 1ch;
}

استایل دادن به نشانگر

قبل از اینکه ::marker در دسترس قرار بگیرد، می‌توانستید با استفاده از list-style-type و list-style-image برای تغییر نماد آیتم لیست، به لیست‌ها استایل بدهید:

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}

::marker با امکان هدف‌گیری شبه‌عناصر نشانگر به صورت جداگانه یا سراسری در CSS، امکان تغییر رنگ، اندازه و فاصله‌گذاری نشانگرها را فراهم می‌کند:

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

::marker در مقایسه با list-style-type کنترل بسیار بیشتری بر روی سبک‌های نشانگر به شما می‌دهد، اما با هر ویژگی CSS کار نمی‌کند. ویژگی‌های زیر مجاز هستند:

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

محتویات یک ::marker با استفاده از content تغییر دهید، نه با استفاده list-style-type . مثال بعدی نشان می‌دهد که چگونه ویژگی‌های list-style-type بر کل آیتم لیست اعمال می‌شوند، و ::marker به شما امکان می‌دهد فقط کادر نشانگر را هدف قرار دهید. ویژگی background با list-style-type کار می‌کند، اما با ::marker کار نمی‌کند.

سبک‌های لیست 
li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
 استایل‌بندی لیست روی کل آیتم لیست تأثیر می‌گذارد.
سبک‌های نشانگر 
li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
 استایل ماژیک به شما این امکان را می‌دهد که روی ماژیک تمرکز کنید.


تغییر محتوای یک نشانگر

در اینجا چند روش برای استایل دادن به ماژیک‌هایتان آورده شده است.

تغییر همه موارد لیست 

li {
  list-style-type: "😍";
}

/* OR */

li::marker {
  content: "😍";
}

فقط یک مورد از لیست را تغییر دهید 

li:last-child::marker {
  content: "😍";
}

تعریف نشانگرها با SVG 

li::marker {
  content: url(/heart.svg);
  content: url(#heart);
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

تغییر لیست‌های مرتب

اما در مورد <ol> چطور؟ نشانگر روی یک آیتم لیست مرتب به طور پیش‌فرض یک عدد است، نه یک نقطه یا "بولت". در CSS، به اینها شمارنده می‌گویند و ویژگی‌هایی برای تنظیم یا تنظیم مجدد محل شروع و پایان عدد یا تغییر آنها به مثلاً اعداد رومی دارند. می‌توانید از ::marker برای استایل‌دهی به شمارنده‌ها نیز استفاده کنید و حتی از مقدار محتوای نشانگر برای ساخت نمایش شماره‌گذاری خودتان استفاده کنید. 

li::marker {
  content: counter(list-item) "› ";
  color: hotpink;
}

اشکال‌زدایی

Chrome DevTools cab به شما کمک می‌کند تا استایل‌هایی را که به شبه عناصر ::marker اعمال می‌کنید، بررسی، اشکال‌زدایی و اصلاح کنید.

DevTools استایل‌ها را از user agent و استایل‌های کاربر باز کرده و نمایش می‌دهد.
توضیحات DevTools از سبک‌های نشانگر.

منابع

می‌توانید اطلاعات بیشتری در مورد ::marker از اینجا دریافت کنید: