CSS: Colored Bullets And List Numbers - W3C

Colored bullets

Ever wanted to make a list with the bullets a different color than the text, like in this example?

• First item
• First item

We will also assume that you don't want to, or cannot, change the HTML markup. (See the note below.)

Some day, the '::marker' selector may graduate from proposal to standard and you'll be able to simply say '::marker {color: red}'. But for now you can simulate the effect by combining a handful of properties.

You can make an image and use that: 'list-style: url(mybullet.png)'. That gives you full control over the color and shape of the bullet. But if you want a bigger or smaller font size, you'd have to make a new image. Ditto if you want a different color.

So we'd rather use text that we can style, in particular a bullet such as • or ◦ or ▪. We need to replace the list item's marker, which we cannot select, by a bullet that we generate and style ourselves. For that we suppress the list style and use '::before' to add our own bullet. First suppress the list style: ul {list-style: none}

Then generate our own bullet: li::before {content: "•"; color: red}

That inserts a red bullet, but not in the same place as the original bullet. We need to move it to the left, but without moving the text of the list item after it. One way to do that is to make our bullet into an 'inline-block' of a given size, say 1em, and then move it to the left by its own size: li::before {content: "•"; color: red; display: inline-block; width: 1em; margin-left: -1em}

That's it.

B.t.w., if you have trouble typing those bullets into your style sheets, you can also use their Unicode numbers: • = "\2022", ◦ = \25E6" and ▪ = "\25AA"