Change the Bullet Color of a List Item with CSS

John Locke

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

In web design, 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 */
  display: inline-block;
  list-style: none; 
  margin: 0 0 16px 1.1225em;
  /* Give the bullet room on the left hand side */
  padding: 0;
  position: relative;
}

 ul li::before {
  color: #006b6e;  
  /* color of bullet or square */
  content: "\2022"; 
  /* Unicode of character to precede the list item */
  display: inline-block;
  font-size: 1em; 
  /* use em or % */ 
  left: -1.1225em; 
  /* use em, line up bullet flush with left hand side */
  position: absolute;
  /* Set the bullet positioned absolutely top left */
  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.

John Locke

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