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.


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


  • 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).


Tags: , , ,

Enough of me, let me know your thoughts below...

  1. Marie Marie says:

    I’m so glad I found you! This is incredibly useful – thank you so much for taking the time to share.