Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to change bullet colors for lists with CSS?
To change bullet colors for lists, use the ::before pseudo-element selector. You need to set the list-style to none first, then create custom colored bullets using CSS content.
Syntax
ul {
list-style: none;
}
ul li::before {
content: "\2022";
color: desired-color;
}
Method 1: Using Unicode Bullet
The most common approach is to use the unicode bullet character (\2022) with the ::before pseudo-element −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
padding-left: 20px;
}
ul li::before {
content: "\2022";
color: orange;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
ul li {
color: black;
font-size: 16px;
}
</style>
</head>
<body>
<h3>Popular Sports</h3>
<ul>
<li>Cricket</li>
<li>Football</li>
<li>Tennis</li>
<li>Basketball</li>
</ul>
</body>
</html>
A list with orange bullet points appears, while the text remains black. Each list item is properly indented with custom colored bullets.
Method 2: Using Different Bullet Styles
You can use different unicode characters to create various bullet styles −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
padding-left: 20px;
}
.square-bullets li::before {
content: "\25A0";
color: red;
margin-right: 10px;
}
.circle-bullets li::before {
content: "\25CF";
color: blue;
margin-right: 10px;
}
.arrow-bullets li::before {
content: "\2192";
color: green;
margin-right: 10px;
}
</style>
</head>
<body>
<ul class="square-bullets">
<li>Red square bullets</li>
<li>Second item</li>
</ul>
<ul class="circle-bullets">
<li>Blue circle bullets</li>
<li>Second item</li>
</ul>
<ul class="arrow-bullets">
<li>Green arrow bullets</li>
<li>Second item</li>
</ul>
</body>
</html>
Three different lists appear: one with red square bullets, one with blue circle bullets, and one with green arrow bullets pointing right.
Key Properties Explained
| Property | Purpose |
|---|---|
list-style: none |
Removes default bullets |
content: "\2022" |
Adds unicode bullet character |
display: inline-block |
Allows width and positioning control |
margin-left |
Positions the custom bullet properly |
Conclusion
Changing bullet colors requires removing the default list-style and creating custom bullets with ::before pseudo-elements. This method gives you complete control over bullet appearance including color, size, and style.
Updated on: 2026-03-15T15:10:59+05:30
492 Views
Advertisements