I've also thought that the same thing would be useful, but alas, the only way I have been able to get the before/after pseudo elements to work is by wrapping the input in a SPAN tag.

This discussion provides some insight as to why input:after doesn't work: http://forums.mozillazine.org/viewtopic.php?f=25&t=291007&start=0&st=0&sk=t&sd=a

You can do something like:

.required:after { content: "REQUIRED"; color: orange; margin-left: 1em; /* space between the input element and the text */ padding: .1em; background-color: #fff; font-size: .8em; border: .1em solid orange; } <span class="required"><input id="foo" /></span> 

I've also thought that the same thing would be useful, but alas, the simplest way I have been able to get the before/after pseudo elements to work reliably is by wrapping the input in a SPAN tag and applying a class to that.

This discussion provides some insight as to why input:after doesn't work: http://forums.mozillazine.org/viewtopic.php?f=25&t=291007&start=0&st=0&sk=t&sd=a

You can do something like:

.required:after { content: "REQUIRED"; color: orange; margin-left: 1em; /* space between the input element and the text */ padding: .1em; background-color: #fff; font-size: .8em; border: .1em solid orange; } <span class="required"><input id="foo" /></span>