Intentando agregar asterisco a los campos de entrada requeridos

No creo que entiendo bien :before y :after porque no puedo hacer que esto funcione. Simplemente bash agregar un asterisco después de los campos obligatorios en un formulario.

Mi código es simple:

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

¿Por qué esto no funciona?
Mi violín aquí: http://jsfiddle.net/3EFTN/

El contenido generado se agrega como elemento secundario del elemento al que lo está agregando. Entonces, el navegador está haciendo esto (algunos atributos omitidos por brevedad):

  *  

Lo cual no es válido.

Eche un vistazo a las especificaciones para entenderlas mejor (tiene ejemplos sobre cómo lo interpreta el navegador).

:after y :before selectores no están destinados a ser utilizados para elementos de formulario, como input , por lo que es imposible hacerlo con CSS. Recomiendo usar jQuery para eso o agregar otro después del elemento.

Su CSS está tratando de agregar * dentro del elemento que es imposible porque no puede contener ningún otro elemento.

Digámoslo de esta manera: :after significa que su contenido se insertará en y al final de su selector :before significa que su contenido se insertará en y al principio de su elemento.

Puede encontrar una buena explicación aquí: http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/