Trying to add asterisk to required input fields

Question

I don' think I quite understand :before and :after since I'm not able to get this working. I'm simply trying to add an asterisk after required fields in a form.

My code is simple:

<input id="name" type="text" required="required" autofocus="" placeholder="Name" autocomplete="off" value="" maxlength="40" class="required" name="name" />

/* Required field */
.required:after {
  content: '*';
  color: #EF5F5F;
}

Why is this not working?
My fiddle here: http://jsfiddle.net/3EFTN/

Answer 1

Generated content is added as a child of the item you're adding it to. So the browser is doing this (some attributes skipped for brevity):

<input class="required">
  <span class="after">*</span>
</input>

Which is not valid.

Take a look at spec to understand it better (it has examples about how the browser interprets it).

Answer 2

:after and :before selectors are not meant to be used for form elements, such as input, so it's impossible to do it with CSS. I'd recommend using jQuery for that or adding another <span> after the element.