CSS marker-offset प्रॉपर्टी का उपयोग

परिचय

`marker-offset` प्रॉपर्टी मार्कर (बुलेट/नंबर) और उससे संबंधित टेक्स्ट के बीच की दूरी निर्दिष्ट करती है।

सिंटैक्स

selector {
    marker-offset: <length> | auto;
}

उदाहरण

<html>
<head>
    <style>
        ul.custom-marker {
            list-style: inside square;
            marker-offset: 2em;
        }
    </style>
</head>
<body>
    <ul class="custom-marker">
        <li>LAN</li>
        <li>WAN</li>
    </ul>
</body>
</html>

ब्राउज़र सपोर्ट

⚠️ महत्वपूर्ण: अप्रचलित (Deprecated)

`marker-offset` **CSS Lists Module Level 3 में अप्रचलित** है और किसी भी प्रमुख ब्राउज़र द्वारा समर्थित नहीं है।

आधुनिक विकल्प

1. ::marker प्सूडो-एलिमेंट (CSS Lists Level 3)

<style>
ul.custom-list {
    list-style: square inside;
}

ul.custom-list li::marker {
    color: #007bff;
    font-size: 1.2em;
    content: "▶ ";  /* कस्टम मार्कर कंटेंट */
}

/* मार्कर और टेक्स्ट के बीच स्पेसिंग */
ul.custom-list li {
    padding-left: 1em;  /* पैडिंग से स्पेस नियंत्रित करें */
}
</style>

2. पैडिंग/मार्जिन के साथ list-style-position

<style>
ul.spaced-list {
    list-style: disc outside;
    padding-left: 2em;  /* मार्कर के लिए स्पेस */
}

ul.spaced-list li {
    margin-left: 1em;   /* मार्कर और टेक्स्ट के बीच अतिरिक्त गैप */
    padding-left: 0.5em;
}
</style>

3. कस्टम मार्कर के लिए ::before (सबसे लचीला)

<style>
ul.custom-bullets {
    list-style: none;  /* डिफ़ॉल्ट मार्कर छिपाएं */
    padding-left: 0;
}

ul.custom-bullets li {
    position: relative;
    padding-left: 1.5em;
}

ul.custom-bullets li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: green;
    font-weight: bold;
}
</style>

सिफारिश

`marker-offset` का उपयोग **न करें**। इसके बजाय `::marker` (आधुनिक ब्राउज़र्स) या `::before` + `list-style: none` (सभी ब्राउज़र्स) का उपयोग करें।