How to Set HTML List's Bullet Color Using CSS?

If you're looking for ways to have a different bullet color for HTML lists than the color of the content it contains via CSS, you could try the different ways shown in this article. Before we dive into that though, for the sake of this article, let's suppose we have the following list element structure:

<ul>
    <li>
        <span>Lorem ipsum dolor</span>
    </li>
    <li>
        <span>Suspendisse sapien nunc</span>
    </li>
</ul>

#Using the CSS color Property to Change Bullet Color

You could quite simply specify the CSS color property on the li tag and specify a different color on a child element, for example:

li {color: red;}
li > span {color: black;}

#Using a Unicode Character as the Bullet

You could turn off the default browser bullets and use a unicode bullet instead using the CSS ::before pseudo-element:

li {list-style: none;}

li::before {
    content: '\2022';
    padding-right: 1em;
    color: red;
}

The bullet unicode character is U+2022 which in CSS is written with a backslash. The backslash simply escapes the unicode character to allow us to refer to characters that cannot be easily put in a document. Read more

You can easily add any unicode character, however, for your convenience we've compiled the list of unicode characters that are most relevant to our usecase (i.e. a list bullet):

Character Description Escaped Unicode
Bullet \2022
White Bullet \25e6
Fisheye \25c9
Bullseye \25ce
Black Square \25a0
White Square \25a1
White square containing small black square \25a3
Black Diamond \25c6
White Diamond \25c7
White diamond containing small black diamond \25c8
Lozenge \25ca
Black right-pointing small triangle \25b8
White right-pointing small triangle \25b9

#Using a Webfont as the Bullet

Similar to adding a unicode character, you could use any custom font generators (such as fontello.com) to add a bullet icon using the CSS ::before pseudo-element. The value of the CSS content property in this case would be whatever you set it as in your font generator settings.

#Using a Bullet Background Image

You could simply use a background image:

li {
    list-style: none;
    padding-left: 20px;

    background-image: url('checkmark.png');
    background-position: left center;
    background-size: 10px 10px;
    background-repeat: no-repeat;
}

You could of course write the background properties in the short-hand form like so:

li {
    list-style: none;
    padding-left: 20px;

    background: url('checkmark.png') left center / 10px 10px no-repeat;
}

You can try services such as patternify.com to make your own png image/patterns and then use those in your CSS code to customize your bullets.

#Using the CSS ::marker Pseudo-Element to Style the Bullet

At the time of writing, this method is not yet supported by any major browser, therefore, be sure to check the compatibility before using it.

Using the ::marker pseudo-element, we could simply do the following to change the color of the list bullet:

li::marker {
    color: red;
}

When using ::marker, keep in mind that only the following CSS properties can be used:

  • All font properties
  • color
  • text-combine-upright

This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.