CSS Selectors: Style lists with the ::marker pseudo-element
Tags: css, webdev, codepen, tutorial
Published: 2022-12-29 18:39:27

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:

```html
<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>
```
{% codepen https://codepen.io/pursuitofleisure/pen/GRGLPYZ %}

## 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:

```css
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):

```css
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.

```css
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:

```css
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
```css
li::marker {
  content: "🍎";
}
```

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

```css
.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:

```css
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.