CSS3 :after pseudo element with input [duplicate]

Answer 1

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;
}