Weird CSS :after pseudoselector issue in Chrome alone [duplicate]

Question

Possible Duplicate:
Combine CSS Attribute and Pseudo-Element Selectors?

I have a very different issue in Chrome. I used the pseudo selector :after to display asterisk mark on required field items. I used custom attribute 'required' to identify the labels which require asterisk symbol. It works fine in Firefox but in Chrome it behaves differently. All the fields including the not required ones now show asterisk symbol after corresponding label. The strangest fact is when I use Chrome developer tools to inspect the label, the asterisk symbol simply vanishes.

HTML:

<div class="labelbox">
    <label data-required>Name</label>
    <span class="float-right">:</span>
</div>

CSS:

label[data-required]:after {
    content: "*";
    color: red;
}

Answer 1

I'm seeing the same error, can't seem to figure it out. Might be a bug in chrome. Either way, I'd just use a class of required and use label.required:after as the selector. That seems to work properly.