How TO - Change Bullet Color of Lists

❮ Previous Next ❯

Learn how to change bullet colors for lists with CSS.

Change Bullet Color

Adele
Agnes
Billy
Bob

Try it Yourself »

Step 1) Add HTML:

Create a basic list:

Example

<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>

Step 2) Add CSS:

By default, it is not possible to change the bullet color of a list item. However, you can do some CSS tricks to make it possible. Note that you might have to tweak it a bit differently if you're using a CSS framework or a special stylesheet:

Example

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

ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: red; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}

Try it Yourself »

❮ Previous Next ❯