In my experience when a dev needs to customize the color of a ul/ol list marker they tend to reach for a ::before or ::after. Not a bad solution, it totally works. Until you want to nest a list, then you have to account for the nested list, and god forbid you need to do a nested list inside a nested list. Oh, and if you want an ordered list now you have to use a counter! Let’s look at the seemingly rarely used ::marker pseudo element.
::marker is a widely supported(looking at you IE) pseudo element that allows you to change the color of a list marker just by using color, like you would any other text. Additionally it fails gracefully on any browsers that don’t support it. So next time you need to change your list markers make sure you remember ::marker! Check out the CodePen below for an example.
See the Pen CSS Custom List Colors by Craig Melville (@acekreations) on CodePen.
