Coloured bullets in List items

As we all make the move to HTML5 and less images in our code for gradients, fonts, box/text shadow, etc. One thing I have yet to find a solution for is coloured bullets on a list item, that is until now.

There isn’t a list-style-color, or a similar way of specifying a colour for a list bullet in the CSS spec, so up till now its been a case of either set the colour on the <li> and wrap a span around your text in an other colour, or use a background image. I have tended to go for the image as you can have a different size bullet to the default one.

Today I was pottering around and came up with a handy trick for doing a coloured square in CSS, of any size or colour you fancy and using any Unicode character you can find. I am writing here so I remember and hopefully one or two of you may find useful. It doesn’t work in IE6/7 but does fall-back to the standard <li> bullet in the colour of your text, so that’s good enough for me.

HTML

<ul>
<li>This is an item in a list</li>
<li>You may have guessed but this is too</li>
<li>Your on a roll, yes this is another list item</li>
<li>Almost finished...</li>
<li>One more for the road</li>
</ul>

CSS

ul.custom-bullet-demo li {
list-style: square;
font-size: 16px;
}
ul.custom-bullet-demo li:before {
color: #B9D851;
content: "\25A0";
font-size: 1.7em;
margin-left: -19px;
padding-right: 0.25em;
position: relative;
}

Result

• This is an item in a list
• You may have guessed but this is too
• Your on a roll, yes this is another list item
• Almost finished…
• One more for the road

I found a Wikepedia page that has a few Unicode characters on it so you can use all sorts of bullets rather than the standard square or circle (except for IE6/7 that is).

– http://en.wikipedia.org/wiki/List_of_Unicode_characters

Tags: bullet, color, CSS, li

This entry was posted by Gavin on Thursday, August 2nd, 2012 at 8:41 am and is filed under CSS.
You can follow any responses to this entry through the RSS 2.0 feed.