How to Change List Bullet Color in CSS

John on January 16, 2021

There is no built-in way to change the bullet color of an HTML list with CSS. Instead, we can build custom list bullets using the ::before CSS pseudo-class and set the color from there.

Let's create an unordered list with a class and apply CSS to create bullets with custom colors.

<ul class="custom-list">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

.custom-list li::before {
  content: '\2022';
  display: inline-block;
  width: 1em;
  color: gold;
  margin-left: -1em;
}

.custom-list {
  list-style: none;
}

In the above example, we are removing the default bullets with list-style: none;. Inside the ::before pseudo-class, we are adding the bullets back using Unicode in the content property, and adding various other styles including color.

Conclusion

Be sure to remember that the new list bullets must be applied to the ::before pseudo-class on the li elements and not the list itself.