How to Change the Bullet Color in a List and not the Font

Here’s another trick I don’t run into very often: how do you change the bullet color in a list but not the font?  Let’s say your client wants a bulleted list, but does not want the font color to be the same as the bullet color.  Like I said, it’s not a problem you’ll face very often, but here’s the way to tackle it if you do.

Here’s the html:

<div class=”bullet-trick”>

<ul>

<li>Text</li>

<li>Text</li>

<li>Text</li>

<li>Text</li>

</ul>

</div>

Here’s the way this will look:

• text
• text
• text
• text

The trick is to add a span tag to the list like this:

<div class=”bullet-trick”>

<ul>

<li><span>Text</span></li>

<li><span>Text</span></li>

<li><span>Text</span></li>

<li><span>Text</span></li>

</ul>

</div>

Then use this CSS:

.bullet-trick ul li {
color: red;
}

.bullet-trick ul li > span {
color: black !important;
}

And it will turn out like this:

If you have another way to do this, leave a comment and let us know! Or, if you have any questions, let us know that as well. I’m sure this isn’t the only way to change the bullet color in a list, but it works for me and it’s relatively easy to do.