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.