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.

ul {
	list-style-type: none;
	position: relative;
	margin-left: 1em;
	padding-left: 0;
}
li:before {
	content: "\2022";
	position: absolute;
	left: -1em;
	color: red;
	margin-right: 5px;
}

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

ul {
	@include sassy_list(red);

	li {
		color: black;
	}
}