LAST UPDATED: AUGUST 16, 2021
How to change bullet color for lists with CSS?
The bullet is added to list out elements without any order on the webpage. It is not possible to change the bullet color directly as the bullet and text are wrapped inside the same <li> tag. So here we apply some tricks to change bullet color.
Changing bullet color
The element is added directly to <li> tag. But if we wrap the text of <li> element to <span> and then add color: green to <li> and color: black to <span> then the bullet color will be changed to green and the text remains to black color.
Example: Changing bullet color with CSS
Here is an example to change bullet color with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
li{
color: green;
}
li span {
color: black;
}
</style>
</head>
<body>
<ul>
<h2> Changing Bullet color </h2>
<li><span>Item1</span></li>
<li><span>Item2</span></li>
<li><span>Item3</span></li>
<li><span>Item4</span></li>
</ul>
</body>
</html>
Output
Here is the output of the above example.
Example: Changing the bullet color with CSS
There is another trick to change the bullet color. To do so first remove the bullet by adding list-style:none to <ul> element. And then use content:"\2022" to add the bullet with ::before selector to <li> element. The ::before selector will add a bullet before the text. Add color, width, font-weight and display: inline-block to properly align it as the default bullet.
Conclusion
In this tutorial, we have learned to change the color of the bullet. We cannot directly change it so we have used some CSS tricks to do so. We have explained it with an example.
