CSS में इमेजेज को लिस्ट मार्कर्स के रूप में उपयोग करना

list-style-image प्रॉपर्टी

इमेज को लिस्ट मार्कर के रूप में उपयोग करने के लिए CSS में list-style-image प्रॉपर्टी का उपयोग करें।

सिंटैक्स:

list-style-image: url('image-url') | none;

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
  list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
  list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>टीमें</h2>
<ul class="demo1">
  <li>भारत - वर्ल्डकप के लिए क्वालिफाइड</li>
  <li>ऑस्ट्रेलिया - वर्ल्डकप के लिए क्वालिफाइड</li>
  <li>इंग्लैंड - वर्ल्डकप के लिए क्वालिफाइड</li>
</ul>
<h2>खिलाड़ी</h2>
<ol class="demo2">
  <li>विराट कोहली</li>
  <li>डेविड वार्नर</li>
  <li>स्टीव स्मिथ</li>
</ol>
</body>
</html>

आउटपुट

अनऑर्डर्ड और ऑर्डर्ड दोनों लिस्ट्स में Swift लोगो इमेज मार्कर के रूप में दिखाई देगी।

list-style-image की सीमाएं:

• इमेज आकार सीधे कंट्रोल नहीं कर सकते
• पोजिशनिंग सीमित (list-style-position से)
• SVG इमेजेज सबसे अच्छी काम करती हैं (स्केलेबल)
• फॉलबैक: इमेज लोड न होने पर list-style-type उपयोग होता है

बेहतर विकल्प: CSS ::marker या बैकग्राउंड इमेज

विकल्प 1: ::marker स्यूडो-एलिमेंट (मॉडर्न)

li::marker {
  content: url('icon.svg');
  font-size: 1.2em;  /* आकार कंट्रोल */
}

विकल्प 2: बैकग्राउंड इमेज (पूर्ण नियंत्रण)

ul.custom-markers {
  list-style: none;
  padding-left: 0;
}
ul.custom-markers li {
  padding-left: 30px;
  background: url('icon.svg') no-repeat left center;
  background-size: 20px 20px;
  min-height: 24px;
}

विकल्प 3: कंटेंट के साथ ::before

ul.custom li::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  background: url('icon.svg') center/contain no-repeat;
  margin-right: 8px;
  vertical-align: middle;
}

सर्वोत्तम अभ्यास:

• आइकन मार्कर्स के लिए SVG उपयोग करें (स्केलेबल, छोटा फाइल साइज़)
• बैकग्राउंड इमेज मेथड सबसे अधिक लचीलापन देता है
• फॉलबैक के लिए list-style-type भी सेट करें
• रिस्पॉन्सिव आकार के लिए em यूनिट्स उपयोग करें