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

I agree that adding content using CSS is not right in most cases. However, visually highlighting a required field I find totally okay to do this way.

content is not supported widely enough (IE doesn’t support it at all IIRC).

What you could do is have the “required” span contain a background image containing the “required” text or an asterisk. Using graphical text has some downsides, but none that a jQuery based solution wouldn’t have either.