Setting a different ul bullet colour in CSS

I've always found it annoying that you can't set a different ul bullet colour through CSS. It should be as simple as:

ul {
color: red;
}
li {
color: black;
}

But unfortunately CSS will render both black. I came across this again the other day in a project, and I was just about to fire up photoshop and create another bullet-point image. Before I had a thought; why not use the css :before selector. I had been playing earlier that week with the CSS content property to add characters before other elements so surely all I needed to do was find the unicode for the buller character.
I ended up having to use position relative for the ul and absolute for the li to make sure if the text drop to a 2nd line it would align on the left rather than dropping underneath.

I then went about creating a sass mixin for this to make it easier to recreate this later on, and with thanks to Daniel X Moore's post, I managed to turn this into a Compass extension which you can download as a RugyGem. See the gem on github.
I can now just use the following CSS