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

Adam Argyle

Oriol Brufau

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

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

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

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

मार्कर बनाएं

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

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

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

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

डीबग

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

संसाधन

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

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