Changing the Bullet Color of a List in CSS

The ::marker Pseudo-Element

CSS provides a pseudo-element called ::marker, which allows direct access to the list markers, bullets in <ul> or numbers in <ol>.

Code Example

ul li::marker,
ol li::marker {
  color: #aaa;
}

This CSS block applies a new color to the list markers.

Browser Support

::marker is well supported in modern browsers: Chrome, Edge, Firefox, Safari, and Opera. It won't work in older browsers like Internet Explorer. But if you're building something modern, that shouldn't be an issue. You can check the detailed support on Can I use.

Small details like this can make a big difference in the aesthetics and consistency of your UI. With ::marker, you now have full control over how your lists look.