सीएसएस ::मार्कर के साथ कस्टम बुलेट

Adam Argyle

Oriol Brufau

सीएसएस ::marker की मदद से, एचटीएमएल सूचियों में मौजूद कॉन्टेंट और बुलेट और नंबर के कुछ स्टाइल बदले जा सकते हैं.

स्यूडो-एलिमेंट के बारे में जानकारी

सूडो-एलिमेंट, दस्तावेज़ के उस हिस्से को दिखाता है जो दस्तावेज़ ट्री में नहीं दिखता. उदाहरण के लिए, किसी पैराग्राफ़ की पहली लाइन को चुनने के लिए, p::first-line स्यूडो-एलिमेंट का इस्तेमाल किया जा सकता है. भले ही, टेक्स्ट की उस लाइन को कोई एचटीएमएल एलिमेंट रैप न कर रहा हो.

यहां एचटीएमएल की बिना क्रम वाली सूची दी गई है:

<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> एलिमेंट की शुरुआत में मौजूद बिंदु, सूची को रेंडर करने के हिस्से के तौर पर जनरेट होता है. साथ ही, इसका अपना एचटीएमएल एलिमेंट नहीं होता. ::marker एक ऐसा सुडो-एलिमेंट है जो उस बिंदु या क्रम से लगाई गई सूची के एलिमेंट की शुरुआत में मौजूद नंबर को दिखाता है.

मार्कर बनाना

::marker स्यूडो-एलिमेंट मार्कर बॉक्स, हर सूची आइटम एलिमेंट में अपने-आप जनरेट होता है. यह, असल कॉन्टेंट और ::before स्यूडो-एलिमेंट, दोनों से पहले जनरेट होता है.

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

आम तौर पर, सूची के आइटम <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, मार्कर के रंग, साइज़, और स्पेसिंग में बदलाव करने की सुविधा जोड़ता है. इसके लिए, आपको अपनी सीएसएस में मार्कर के सूडो-एलिमेंट को अलग-अलग या ग्लोबल तौर पर टारगेट करने की सुविधा मिलती है:

li::marker {
  color: hotpink;
}

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

::marker, list-style-type की तुलना में मार्कर स्टाइल पर ज़्यादा कंट्रोल देता है. हालांकि, यह हर सीएसएस प्रॉपर्टी के साथ काम नहीं करता. इन प्रॉपर्टी का इस्तेमाल किया जा सकता है:

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

list-style-type के बजाय, content का इस्तेमाल करके ::marker का कॉन्टेंट बदलें. अगले उदाहरण में दिखाया गया है कि 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> के बारे में क्या? क्रम से लगाए गए सूची के आइटम पर, डिफ़ॉल्ट रूप से नंबर का मार्कर होता है, न कि बिंदु या "बुलेट." सीएसएस में, इन्हें काउंटर कहा जाता है. इनमें ऐसी प्रॉपर्टी होती हैं जिनसे यह सेट या रीसेट किया जा सकता है कि नंबर कहां से शुरू और कहां पर खत्म होता है. इसके अलावा, इन प्रॉपर्टी की मदद से, नंबर को रोमन अंकों में भी बदला जा सकता है. ::marker का इस्तेमाल करके, काउंटर को स्टाइल भी किया जा सकता है. साथ ही, मार्कर कॉन्टेंट वैल्यू का इस्तेमाल करके, अपनी पसंद के हिसाब से नंबरिंग प्रज़ेंटेशन भी बनाया जा सकता है.

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

डीबग

Chrome DevTools की मदद से, ::marker स्यूडो-एलिमेंट पर लागू की गई स्टाइल की जांच की जा सकती है, उन्हें डीबग किया जा सकता है, और उनमें बदलाव किया जा सकता है.

संसाधन

::marker के बारे में ज़्यादा जानने के लिए, यहां जाएं:

• Smashing Magazine से सीएसएस की सूचियां, मार्कर, और काउंटर के बारे में जानकारी
• CSS-Tricks से सीएसएस काउंटर और सीएसएस ग्रिड की मदद से गिनती करना
• MDN से सीएसएस काउंटर का इस्तेमाल करना