Changing bullet colour and icon of a html list element using CSS

Changing bullet colour and icon of a html list element using CSS used to be quite a ‘hacky’ affair. The easiest way that I knew to achieve this effect was to change the ‘list-style’ to ‘none’ and use a ‘::before’ pseudo-element instead. As of time of writing, the top hit on google still suggests this approach.

As with most things, I hadn’t been asked to do anything like this for many years. Recently I’ve become aware of a much better and more modern way to achieve this, using the ‘::marker’ pseudo-element.

Changing bullet colour

To demonstrate this we will first need some simple html:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

Now using css we can simply target the ‘::marker’ pseudo-element of the list element:

li::marker {
    color: green;
}

As you’ll be able to see, all the markers have changed to green.

Changing bullet icon

Using the same html we can change the symbol used to denote the marker using the ‘content’ attribute. Add the following to the CSS:

li::marker {
    color: green;
    content: "⇢";
}

In this example we’re adding a unicode character to the content so that we see a ‘Rightwards Dashed Arrow’ instead of the normal filled circles.

Here is a quick fiddle to demonstrate this approach.

Note: You can also change things like the font-size and font-family of a marker pseudo-element. Why not give it a go?

Bonus: Adding markers to other elements

In theory, we can use the marker pseudo-element on whatever elements we like. However, to do this we have to change the display property of the element to ‘list-item’.

h1 {
    display: list-item;
}

h1::marker {
    content: "😊";
}

Here we’ve made some happy h1 tags 😊.