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

I send a newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

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 you need a link, don’t use a button

    Links sometimes need to look like buttons, but what about the other way round? Spoiler alert: it’s a terrible idea!

  2. Overlapping interactive areas

    When an interactive element like a button, link, and form field sits on top of another interactive element, accessibility (and usability) problems arise.