In this post, we will learn how to change bullet color of a list with CSS. If we don't want the default bullet color then we can change it with the help of CSS. So how we can change bullet color, we will learn in this post.


How To Change Bullet Color Of A List With CSS ?


Change Bullet Color Of A List

To change bullet color of a list, we use ::before CSS selector and then use color property for change the bullet color. For better understanding we see this example.


<!DOCTYPE html>
<html>
<head>
<title>How To Change Bullet Color Of A List With CSS ?</title>
<style>

ul {
list-style: none;
}

ul li::before {
content: "\2022";
color: blue;
font-weight: bold;
display: inline-block;
width: 10px;
margin-right: 5px;
}

</style>
</head>
<body>

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>

</body>
</html> code-box

In this above example we change bullets color from black to blue color.



Summary

In this post we learned how to change bullet color of a list with CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post