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;
}