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. Using Pandoc to convert Markdown to Jira’s Textile in Sublime Text

    It’s a real pain that Jira’s plain text input isn’t Markdown. Here’s how to I write in Markdown and export to Jira’s version of Textile.

  2. Apple dials back the Safari 15 for macOS redesign

    The ultra-condensed tab bar in the up-coming Safari for macOS has been reverted in the betas; it’s now just an option in Safari’s Preferences.