Custom Bullet Point Colors With CSS

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!