EN
CSS - how to change bullet color of unordered list?
5 points
In this article, we would like to show you how to change bullet color of unordered list using CSS.
By default, it is not possible to change the bullet color of an unordered list item.
However, you can achieve this effect in the following way:
- Remove the existing bullet
xxxxxxxxxx1ul {2list-style-type: none;3} - Add new bullet using
content: "\2022";( \2022 is bullet character unicode), - Change the content (new bullet) color,
- Specify the space between the new bullet and list item text,
- Move list item with a new bullet to the left (
margin-left: -1em;) to the old bullet place.
Note:
You can also customize the bullet with various CSS styles such as
font-weight: bold;and so on.
In this example, we use the five steps mentioned above to create an unordered list with red bullets.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
ul {7
list-style-type: none; /* remove existing bullet */8
}9
10
ul li::before {11
content: "\2022"; /* adds new bullet, \2022 is the CSS code/unicode for a bullet */12
color: red; /* change the content (bullet) color */13
14
font-weight: bold; /* if you want it to be bold */15
font-size: 1em; /* specifies font size in em or %*/16
display: inline-block; /* adds space between the bullet and the text */17
width: 2em; /* space between the bullet and the text */18
margin-left: -1em; /* move bullet to the left (to the old bullet place) */19
}20
21
</style>22
</head>23
<body>24
<ul>25
<li>item 1</li>26
<li>item 2</li>27
<li>item 3</li>28
</ul>29
</body>30
</html>In this example, we remove the existing bullet, create a new one from SVG and set its color using SVG element atribute - fill='silver' (you can use color names and hex colors).
xxxxxxxxxx1
2
<html>3
<body>4
<style>5
6
ul {7
padding: 0 0 0 15px;8
position: relative;9
list-style-type: none; /* remove existing bullet */10
}11
12
ul li::before {13
position: absolute;14
left: 0;15
width: 7px;16
height: 7px;17
line-height: 0.9rem;18
display: inline-block;19
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='silver' viewBox='0 0 2 2'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");20
}21
22
</style>23
<ul>24
<li>A</li>25
<li>B</li>26
<li>C</li>27
</ul>28
</body>29
</html>Note:
Change
fill='silver'in the code above to set your own bullet color.You can use both color names and hex codes.
