कैसे करें - सूचियों का बुलेट रंग बदलें
CSS के साथ सूचियों के लिए बुलेट रंग बदलने का तरीका जानें।
बुलेट रंग बदलें
- एडेल
- एग्नेस
- बील्ली
- बीओबी
चरण 1) HTML जोड़ें:
एक मूल सूची बनाएं:
उदाहरण
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>
चरण 2) सीएसएस जोड़ें:
डिफ़ॉल्ट रूप से, सूची आइटम के बुलेट रंग को बदलना संभव नहीं है। हालाँकि, आप इसे संभव बनाने के लिए कुछ CSS ट्रिक्स कर सकते हैं। ध्यान दें कि यदि आप CSS फ्रेमवर्क या विशेष स्टाइलशीट का उपयोग कर रहे हैं तो आपको इसे थोड़ा अलग तरीके से बदलना पड़ सकता है:
उदाहरण
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a
bullet */
color: red; /* Change the color */
font-weight:
bold; /* If you want it to be bold */
display: inline-block; /*
Needed to add space between the bullet and the text */
width: 1em;
/* Also needed for space (tweak if needed) */
margin-left: -1em; /*
Also needed for space (tweak if needed) */
}