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:
- text
- text
- text
- text
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.
sarah says
This doesn’t work!
mobremski says
@Sarah, this must work, since I’ve actually got the code working on this demo in the background. Check firebug and you’ll see. What browser are you using? This isn’t a css3 trick, so, I’m not sure that would be the problem for you.
Masivuye Cokile says
You are good man… 🙂 it works thanx
Stephen says
Sadly I find that my WP editor does not allow me to save span tags – I am not sure why ?
Muhammad Reyaz says
This is Very Nice, Thank you so much
Kristina says
This method works, but the code is a bit too complicated.
This worked for me with the same HTML as above:
ul {
color: #b5c4e5;
}
span {
color: #ffffff;
}
mobremski says
Nice! I like it even better. Thanks Kristina!
Addison says
Yes! Exactly what I was looking for. Thank you, Kristina.
jeru says
thank u
Lohith says
superb trick!
Zubair says
Unfortunatley it is not working for me.
If found this code but it just add a colored dot.
li:before {
content: ‘2022’;
color: red;
padding-right: 0.5em;
}