In this tutorial, we will learn how to change unordered list bullets color in HTML and CSS. By default, it is not possible to change the bullet color in an unordered list, but with help of some other elements and selectors, you can change the bullet color.
There are two ways to change the bullet color in an unordered list, one is using an extra HTML element and the other one is using CSS pseudo-element
::before that allows us to add some content before an element. For the sake of simplicity, we will use an extra HTML element
span to change the bullet color in an unordered list.
In this example, we will wrap the list of items with the span element and then define the style using CSS. Please have a look over the code example and the steps given below.
- We have 3 elements (
span) in the HTML file.
- In each
li element, we have one nested
span element contains the text for the list item.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bullets color change</title>
<link rel="stylesheet" href="./style.css">
- We are selecting all
li elements and changing the color to red using the
color property. As a result, the list item text color, as well as the color of the bullets, will be changed to red color.
- As you know, by default the color of the list item text is black. To restore that, we are selecting all the
span elements and changing the color to black using the
- As a result of the above-given steps, the color of the bullets will be changed to red and the list item text color will be changed to black color.
/* bullet color */
/* text color */