DEV Community

Nathan
Nathan

Posted on • Originally published at natclark.com

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;
}
Enter fullscreen mode Exit fullscreen mode

Next, let's replace the removed bullets with new ones, making sure to specify a new color:

li::before {
    content: "\2022";
    color: #00f; /* Blue */
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (0)