Changing the Color of List Style Circle with CSS

A brief tutorial on changing the list-style circle color with CSS. A simple CSS trick.

Tweet
Share
Share
Pin

In order to change the list-style circle we can do the following:

<style>
	ul li{
		list-style:circle;
		color:red;
	}
	ul li span{
		color:green;
	}
</style>
<ul>
	<li><span>Some Text</span></li>
	<li><span>Some Text</span></li>
</ul>

This will make the span text color be green and the circle be a red color. You can add classes and modify this code to fit your project.

Enjoy!