September 14, 2022

How to Change Unordered List Bullets Color in HTML and CSS

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.

HTML

We have 3 elements (ul, li, and span) in the HTML file.
In each li element, we have one nested span element.
The span element contains the text for the list item.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
</head>
<body>
    <ul>
        <li><span>Tea</span></li>
        <li><span>Milk</span></li>
        <li><span>Bread</span></li>
        <li><span>Eggs</span></li>
    </ul>
</body>
</html>

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 color property.
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.

li{
    /* bullet color */
    color: red;
}
span{
    /* text color */
    color: black;
}

You May Also Like: