This is something that I’ve been looking for for a long time, and so far I haven’t been able to figure out how to do it, but now I’ve found a good solution that is (as far as I know) cross-browser compatible!
In the end, it’s one very simple line of CSS code. Of course, in this example you’ll need to change the colour yourself, but this is all that it takes.
ul li::marker {
color: #FF0000;
}That’s it. Simple!
The explanation of this is also quite simple. The ::marker part is what makes it work. That relates to the marker that’s the part of the list item line. In this case it’s the dot, but you can also set it for numbered lists using the same code, but with ol instead of ul.
If you want to change this for every list item on your site, just add this without any mention of ul or ol.
li::marker {
color: #FF0000;
}I wish everything that I needed to do was this easy.