Blog: Web Design
Picture of a bullet (not in CSS)

Change the Bullet Color of a List Item with CSS

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Sometimes it is useful to change the bullet color of a list item to some other color besides the text color. We can do this using CSS.

For example, perhaps you have a bulleted list, and you want to keep the text black, but make the bullets green.

There is no CSS rule for declaring the color of li or ul bullets directly. Though it would be cool if there were an easy way to do this.

All web browsers render the bullet in the same color as the text by default.

What you can do is change the color of the list-item bullets with CSS by eliminating the default bullets that the browser puts in, and adding in new bullets in your desired color.

If you want to use a square or other HTML character instead of a bullet in your un-ordered list, you can use this method to do that as well.

Changing the Bullet Color of a List Item with CSS



/**
 * Change bullet color of list item by replacing it with CSS
 */


ul li {
  color: #3c3c3c; 
  /* set color of list item text */

  list-style: none; 
}

 ul li::before {
  color: #006b6e;  
  /* color of bullet or square */

  content: "\2022"; 
  /* Unicode of character to precede the list item */

  font-size: 1em; 
  /* em or %*/
 
  padding-right: 1.1225em; 
  /* use em*/

  position: relative;
  top: 0em; 
  /* use em or % */

}

What’s Happening in the CSS

First, we use list-style: none to eliminate the default bullets that precede list-items in an unordered list.

Next, we use the ::before pseudo-element to insert content before the list-item. To add a HTML character, we have to use the Unicode value with the back-slash (to indicate we want to look up the Unicode number).

We can then set the other values we want, like color, font-size, and padding-right.

Keep in mind that for font-size and top, you need to use either em or percentage for this to work as expected in all browsers.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

4 comments on “Change the Bullet Color of a List Item with CSS

    1. Hi Joe:

      I just tested this in Edge 15, 16, 17, and Insider Preview on Windows 10. It looked to be working.

      What is your OS / browser combo where you are seeing a bug?

      Thanks,
      John

Join the Conversation

Your email address will be kept private. Required fields marked *.