Change Bullet Color for Lists with ::marker CSS Selector

css
Published on December 26, 2020

Bullet color for HTML lists can be changed using the ::marker CSS selector. This selector selects the marker box (bullet or number) for <li> elements inside <ul> or <ol>.

Example

  • Item 1
  • Item 2
  • Item 3

HTML & CSS :

<ul id="sample-ul">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
#sample-ul li::marker {
	color: green;
}

Browser Compatibility

::marker is supported in all modern browsers — Chrome, Edge, Firefox & Safari.

In this Tutorial