इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

संसाधन

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