Skip to main content

Custom unordered list markers, done right

Posted in CSS and Development

In my post on styling list markers I mentioned that we now have proper control over list markers.

With ::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 list-style-type:

  • A filled-in circle (disc)
  • An outline of a circle (circle)
  • A square (square)

Luckily, we can get really custom by using a unicode value instead of disc, circle or square. So, for example, if you wanted your bullets to be black, right-pointing triangles, you’d use:

ul {
list-style-type: "\25B6";
}

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:

ul {
list-style-type: disc;
list-style-type: "\25B6";
}

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.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. If HTML and ARIA don’t allow it, it’s probably a bad idea

    I like to use invalid HTML and ARIA as a design constraint; a line I can’t step across. Sounds obvious, but in practice it’s not always that simple!

  2. Mac event 2021

    Apple had their final event of the year last night and it was especially exciting as I’m in the market for a new Mac. Here are my thoughts.