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

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;
}

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

• 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 के बारे में ज़्यादा जानने के लिए, यहां जाएं:

• SmaSH पत्रिका की सीएसएस की सूची, मार्कर, और काउंटर
• CSS-Tricks से गिनती की जा रही है
• MDN से सीएसएस काउंटर का इस्तेमाल करना