CSS coloured bullets in lists

We've been playing with some CSS and we've commonly used spans to colour bullets… i.e.


<li><span>red</span></li>

<style>
li{
color:black
}
li span{
color:red
}
</style>

Well we’ve come up with a better way all by accident whilst playing with expressions and here it is…

<li>red</li>

<style>
li{
color:black
}
li{
zoom: expression(
this.innerHTML = (typeof this.processed == "undefined" ? "• " : "") + this.innerHTML, this.processed = true, this.runtimeStyle.zoom = "1"
);
}

li:before{
content:'• ';
color:red;
}
li span.before{
color:red;
}
</style>

Note that in the li:before the bullet should be a rendered • NOT character encoded.

Expression is for Internet Ignorer (nee Internet Explorer) and :before works for all other browsers.

this.processed is required or Internet Ignorer keeps on rendering them


Enjoy!


PS. Sorry it's been ages since our last post - but we've been very very busy people!!