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.

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form 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. Upgrading from a Home button to a Face ID iPhone

    One from the Unpublished Drafts archive: my thoughts on moving from a Home button iPhone to a Home button-less Face ID iPhone.

  2. Accessible animated GIFs are pointless

    Animated GIFs are everywhere, but are they accessible to everyone? I’m afraid to say, they’re not, and we probably shouldn’t be using them.