Custom unordered list markers, done right
Posted 8th October 2020 in CSS and Development
In my post on styling list markers I mentioned that we now have proper control over list markers.
::marker we can control the colour and size of both ordered and unordered lists. We also have all the flexibility we’d ever need for ordered lists, which are typographical: colour, size, typeface, weight, etc. Unordered lists, on the other hand, are a bit more limited; other than colour and size, you’ve only got three shapes in
- A filled-in circle (
- An outline of a circle (
- A square (
Luckily, we can get really custom by using a unicode value instead of
square. So, for example, if you wanted your bullets to be black, right-pointing triangles, you’d use:
Unfortunately, custom list markers aren’t supported in Safari, so for now it’s a nice progressive enhancement. We need a classic double declaration for Safari as, without the
disc style before the Unicode style, Safari displays no markers at all:
If you need those black, right-pointing arrows across all browsers, you can still do it the old fashioned way with the
::before pseudo element.