Custom Bullet Point Colors With CSS

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!