Changing the bullet color in HTML Lists

In this tutorial, we are going to learn about how to change the default bullet color in HTML lists using CSS.

Note: We can’t change a bullet color by using a CSS color property in the ul element.

Changing the Bullet color

Consider, we have a following bullet list items:

<ul>
   <li>Apple</li>
   <li>Bananna</li>
   <li>Grapes</li>
</ul>

To change the default bullet color of a list item, there is no built-in css way to do it instead, we can do it by tweaking the css properties like this:

ul {
  list-style: none; /* Removes the default bullets */
}

ul li::before {
  content : "\2022"; /* Adds the bullet */
  padding-right: 10px; /* creates the space between bullet, list item */
  color: blue; /* changes the bullet color*/
}

In the above css:

1. First, we removed the default bullets by setting a list-style property to none in ul.

2. We added a custom bullet using content: \2022. Where \2022 is the css unicode character of a bullet.

3. The padding-right : 10px creates the space between the bullet and the list item.

4. The color: blue changes the bullet color.

You can also increase the bullet size along with li (list-item), by adding a font-size to the ul element.

ul {
  list-style: none;
  font-size: 32px; /* increases the bullet size,list-item font size */
}

ul li::before {
  content : "\2022";
  padding-right: 10px;
  color: blue;
}

Here is the codepen demo: