Adding “required” text to an HTML form via CSS

Question

I have a <form> that looks like this:

<form>
  <input type="text" name="name" id="name" /><span class="required"></span>
</form>

What I want to do is show some text, such as * or Required in the <span> element, instead of "hard coding" the text for every such place I need the text so the form looks something like this:

[input box] Required

I googled around and found that it could be done by a CSS style using content such as:

.required:before
{
  content: "aaaa"
}

But, should I be using this technique (is it supported in every major browser for example) or is there a more preferred way to do this sort of thing?

Thanks

UPDATE Ps. I don't want to use JavaScript for this, just plain CSS.

Answer 1

Check this : Content

aslo check this compatiblity

Don't use

I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.