Change Bullet Color for Lists with ::marker CSS Selector

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

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.