By default, HTML bullet points inherit the color of their text.
By default, HTML bullet points inherit the color of their text.
However, there are times when you might want to make your bullet points a different color than the inheritance.
So, let's start by removing the default bullet point altogether:
ul {
list-style: none;
}
Next, let's replace the removed bullets with new ones, making sure to specify a new color:
li::before {
content: "\2022";
color: #00f; /* Blue */
}
That funny little \2022
Unicode character renders as this bullet point symbol: "•".
You can also use \25E6
for a hollow bullet point ("◦") and \25AA
for a boxed bullet point ("▪").
Customizing numbered list colors
Coloring numbers in numbered lists is similar to coloring bullet points.
First, remove the default number:
ol {
counter-reset: li;
list-style: none;
}
Then, just add a display, position, and color to some new numbers that will automatically increment with each <li>
element:
li::before {
color: `#00f`; /* Blue */
content: counter(li);
display: inline-block;
margin-left: -1em;
width: 1em;
}
li {
counter-increment: li;
}
If you want to learn more about counters in CSS, W3Spoint has a nice write-up on them. But exploring them further is a bit beyond the scope of this tutorial.
Conclusion
I often find it necessary to modify the color of my bullet points when I'm building sites and apps, so I hope this helps you too!
Top comments (0)