Adds : after labels and * after required labels

labels.css

/* Adds : after labels */
form label:after{
    content:":";
}

/* Adds * after required labels */
form label.required:after{
    content:"*";
}

Idea from http://csswizardry.com/2010/09/keeping-code-clean-with-content/

From the above link:

"The great thing here, and this is extremely die-hard web standards and semantics, is that an item’s title is not technically ‘Name:’ or ‘Age:’, rather it is just ‘Name’ and ‘Age’. The colon is, if you are being very anal, just stylistic."

Doesn't work in IE6 though... which means you have to convince the client to allow things to look different in different browsers

shouldn't it be: form label:after and form label.required:after then overridden in sub classes of the form? (ie: This isn't a special case, the other forms are the special cases, you wouldn't want this on the login form for example).

Right, this solution is only good for sites that don't support IE6. I'm wondering now if it will work in IE7...

Right, I guess that makes more sense (re: form vs. #myform). Updated.