HTML Tip: Coloured bullets using CSS

In a bit of a departure from my normal work, I've been putting together a set of HTML templates and screen designs for a prototype. The company I'm working with has a very strong brand, and the standard text-coloured bullets just weren't quite right. I did a bit of googling for approaches to making this work, but most of them involved wrapping the 'text' part of the bullet in an HTML element:

<ul>
  <li><span class="text">Bullet text</span></li>
</ul>

ul {color: red;}
ul .text {color: black;}

I don't particularly like this approach, because it involves adding additional markup to deal with styling, which is bad news. Instead, I came up with the following approach:

<ul>
  <li>Bullet text</li>
</ul>

ul {color: red;}
ul li:first-line {color: black;}

This approach works because it asks the browser to render the first line of the bullet in black, and most browsers don't consider the bullet itself part of that first line. Sadly, almost inevitably, this doesn't work on Internet Explorer. Sigh. None the less, if you're looking for a clean way to deal with this that works with most browsers, and you're not too worried about the dwindling numbers of Internet Explorer users, then this approach is worth a look.