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

<ul> या <ol> का इस्तेमाल करते समय रंग, साइज़ या संख्या या बुलेट को पसंद के मुताबिक बनाना अब आसान हो गया है.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Bloomberg की स्पॉन्सरशिप इगालिया की बदौलत, हम आसानी से स्टाइल बनाने के लिए इन नुस्खे का इस्तेमाल करना बंद कर सकते हैं. देखें!

सोर्स देखें

सीएसएस ::marker की मदद से, हम कॉन्टेंट के साथ-साथ बुलेट और संख्याओं के कुछ स्टाइल बदल सकते हैं.

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

::marker, डेस्कटॉप और Android के लिए Firefox, डेस्कटॉप Safari और iOS Safari (लेकिन सिर्फ़ color और font-* प्रॉपर्टी, Bug 204163 देखें) और Chromium-आधारित डेस्कटॉप और Android ब्राउज़र में काम करता है.

ब्राउज़र सहायता

  • 86
  • 86
  • 68
  • 11.1

सोर्स

सूडो एलिमेंट

नीचे दी गई ज़रूरी एचटीएमएल बिना क्रम वाली सूची पर विचार करें:

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

इसकी वजह से, नीचे दी गई अजीबोगरीब रेंडरिंग होती है:

हर <li> आइटम की शुरुआत में बिंदु मुफ़्त है! ब्राउज़र आपके लिए जनरेट किया गया मार्कर बॉक्स बना रहा है और बना रहा है.

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

हालांकि, ::marker पर हर सीएसएस प्रॉपर्टी का इस्तेमाल नहीं किया जा सकता. किन प्रॉपर्टी को अनुमति है और किन प्रॉपर्टी को अनुमति नहीं है, इसकी सूची स्पेसिफ़िकेशन में साफ़ तौर पर दी गई है. अगर आप इस स्यूडो एलिमेंट के साथ कोई दिलचस्प चीज़ आज़माते हैं और इससे काम नहीं बनता है, तो नीचे दी गई सूची से आपको पता चलेगा कि सीएसएस की मदद से क्या किया जा सकता है और क्या नहीं:

अनुमति वाली सीएसएस ::marker प्रॉपर्टी

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

::marker के कॉन्टेंट में बदलाव करने के लिए, list-style-type के बजाय content का इस्तेमाल किया जाता है. इस अगले उदाहरण में, पहले आइटम को list-style-type का इस्तेमाल करके और दूसरे आइटम को ::marker की मदद से स्टाइल किया गया है. पहले मामले में दी गई प्रॉपर्टी, सिर्फ़ मार्कर पर ही नहीं, बल्कि पूरे सूची आइटम पर लागू होती हैं. इसका मतलब है कि टेक्स्ट के साथ-साथ मार्कर भी ऐनिमेट हो रहा है. ::marker का इस्तेमाल करते समय हम सिर्फ़ मार्कर बॉक्स को टारगेट कर सकते हैं, टेक्स्ट को नहीं.

यह भी ध्यान रखें कि कैसे background प्रॉपर्टी की अनुमति नहीं है, इसका कोई असर नहीं पड़ता है.

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

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

डीबग करना

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

DevTools खुला है और उपयोगकर्ता एजेंट और उपयोगकर्ता स्टाइल के स्टाइल दिखाता है

आने वाले समय में बदली जाने वाली बदली हुई स्यूडो-एलिमेंट स्टाइलिंग

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

किसी ऐसी चीज़ का ऐक्सेस पाना सबसे अच्छा होता है जिसे स्टाइल करना मुश्किल हो. आप चाहें, तो अपने-आप जनरेट हुए दूसरे एलिमेंट को स्टाइल किया जा सकता है. हो सकता है कि आप <details> या खोज इनपुट के अपने-आप पूरे होने वाले इंडिकेटर से परेशान हों. ऐसा उन चीज़ों से भी हो सकता है जिन्हें ब्राउज़र पर, एक ही तरह से लागू नहीं किया जाता है. अपनी ज़रूरत की जानकारी शेयर करने का एक तरीका यह है कि https://webwewant.fyi पर जाकर अपनी इच्छा ज़ाहिर करें.