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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
<ul>
\n<li>This is an item in a list<\/li>
\n<li>You may have guessed but this is too<\/li>
\n<li>Your on a roll, yes this is another list item<\/li>
\n<li>Almost finished...<\/li>
\n<li>One more for the road<\/li>
\n<\/ul><\/code><\/p>\nCSS<\/h3>\n
ul.custom-bullet-demo li {
\nlist-style: square;
\nfont-size: 16px;
\n}
\nul.custom-bullet-demo li:before {
\ncolor: #B9D851;
\ncontent: \"\\25A0\";
\nfont-size: 1.7em;
\nmargin-left: -19px;
\npadding-right: 0.25em;
\nposition: relative;
\n}<\/code><\/p>\nResult<\/h3>\n