I recently came across a design that asked for colored bullets in a bullet list. One would think that there would be some sort of CSS property to allow such a thing. But alas, there isn’t. The bullets are always the color of the text. However, I refused to resort to using images for bullets when all they had to be was a different color.

After a few minutes of thinking, I came up with a solution. Just set the color of the <ul/> element to the color for the bullets, then enclose each list item’s text inside of a <span/> that specifies the text color. For example:

<ul style="color: red">
<li><span style="color: black">List Item 1</span></li>
<li><span style="color: black">List Item 2</span></li>
<li><span style="color: black">List Item 3</span></li>
<li><span style="color: black">List Item 4</span></li>
</ul>

This displays as:

• List Item 1
• List Item 2
• List Item 3
• List Item 4

It’s a little bit of a pain to have to include the extra tags, but it’s less of a pain that creating images every time you need different colored bullets.

Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of my employer, my colleagues, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.