CSS Selectors: Style lists with the ::marker pseudo-element

For HTML lists, there was no straightforward way to style the bullets a different color from the list text until a couple of years ago. If you wanted to change just the marker color, you'd have to generate your own with pseudo-elements. Now with widespread browser support of the ::marker pseudo-element, this can be targeted directly.

Let's look at the different methods for styling lists, from methods before ::marker was available and how to style with ::marker going forward. Here's a simple grocery list that we will style:

<ul>
  <li class="list__apples">Apples</li>
  <li class="list__bananas">Bananas</li>
  <li class="list__avocados">Avocados</li>
  <li class="list__cheese">Cheese</li>
  <li class="list__bread">Bread</li>
</ul>

Before ::marker

Changing the bullet color using ::before or ::after

In order to change the color of list bullets, we need to generate new bullets using pseudo-elements:

li {
  display: flex;
  align-items: center;
  gap: 0 0.25rem;
}
li::before {
  content: "\2022";
  color: #ec368d;
}

Here we are creating a bullet icon by using the CSS code/unicode "\2022" - which is the code for a filled-in circle. We can set the color and then since the list-item is using flex, we can vertically center the bullet with the text. Before flex was supported, I used position: absolute, which was horrible to style and to keep responsive with the font-size. So with flex being available now, this already makes the old method not as cumbersome as it used to be. The new marker will take into account any left-padding on the list.

I used to include the following rule to remove the default list styling first. This is accomplished by the following line (if you have any CSS resets in use, this may already be included):

ul {
  list-style: none;
}

This rule however is actually not needed because with the pseudo-elements, those replace the default style regardless. You may or may not want to add this for standardization purposes.

Changing the marker to an image

What about changing the marker to an image instead? This is actually pretty simple. Here I'm setting the marker to the CSS code/unicode for a shopping cart emoji.

li {
  list-style: "\1F6D2";
}

Using ::marker

Changing the color of the list marker

Now that we have access to ::marker, things are much easier. If we want to just change the color of the bullets, then it's just one line:

li::marker {
  color: #ec368d;
}

For changing the bullets to an emoji, we can also use ::marker. This is the same amount of code as the old method, so it's your preference on which to use:

Changing the marker to an emoji

li::marker {
  content: "🍎";
}

Let's have fun and have each emoji match its list item:

.list__apples::marker {
  content: "🍎";
}
.list__bananas::marker {
  content: "🍌";
}
.list__avocados::marker {
  content: "🥑";
}
.list__cheese::marker {
  content: "🧀";
}
.list__bread::marker {
  content: "🥖";
}

You can also use the CSS code/unicode value for content instead of the actual emoji in case emojis cause issues within your editor or compiler:

li::marker {
  content: "\1F34E";
}

Conclusion

And that's it for styling list markers! Short and simple and one of the really nice things to have compared to the old methods.