Skip to main content

Styling list markers the right way

Posted in CSS and Development

Styling list markers has always been a bit of a fight. Even simple styling like changing the colour of the bullets/numbers, or making them bigger involved a fair bit of CSS.

In the early days, CSS offered us very little in the way of customisation, which was frustrating for a lot of designers. All we could do was change:

  • the default filled-in bullet (disc) to a square (square) or hollow circle (circle)
  • the numbers in an ordered list to Roman numerals or alphabetical (‘a’, ‘b’, ‘c’), either uppercase or lowercase

Later, we were able to replace the default characters, but as ever, for lack of the right tools, we resorted to a hack to make those designs happen.

The way we’ve been doing it

For a long time, styling lists by replacing the default markers with custom ::before pseudo elements is the way we got those bullets and numbers looking fancy.

First we’d get rid of the default list styling and add the custom bullets back in. Here I’m just using a ASCII circle character (\25CF) as the marker, but you could use any ASCII character you like:

list-style: none;
padding-left: 0;

li {
padding-left: 1.5em;
position: relative;

li::before {
content: "\25CF";
color: green;
position: absolute;
left: 0;

But that means ordered lists will have a bullets too, which isn’t what we want. Building on the previous CSS, we’d give <ol>s a number by adding the following:

ol {
counter-reset: item;

ol li::before {
content: counter(item) "\002E";
counter-increment: item;

Note: "\002E" adds a full stop after the number to replicate the default styling, but, again, you can add any ASCII character you like here.

The way we can do it now

That’s a lot of code when you compare it to how we can do it now, using the relatively new ::marker pseudo element:

li::marker {
color: green;

Easy to write, easy to read, and does exactly the same thing; making list markers green, but without:

  • removing and replacing the default spacing
  • removing and replacing the marker
  • the fancy CSS counter for ordered lists

You can style the marker any way you’d style ordinary text, so there’s loads of control. And, of course, you’ve still got access to the list-style-type, so you can make the bullet a square or count in Roman numerals.

Browser support is good

At the time of writing, this new technique to style list markers works beautifully in Firefox and Safari. It isn’t supported in Chrome, Edge or Opera yet, but the good news is that it’s in the next version of Chrome (version 86), and that means that support in Edge and Opera won’t be far away, since they both piggy-back on the same browser engine as Chrome.

Accessibility in your inbox

I send an accessibility-centric 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. Own your own content

    Posting valuable content to social media or other platforms you have no control over can be risky; just look at the mess over on Twitter…

  2. Mastodon and me

    Mastodon has enjoyed a spike in popularity lately. It took me a while to wrap my head around the basic concept, but it feels like the right way to do social networking.