CSS3 :after pseudo element with input [duplicate]

Question

Just playing with :before and :after.

It seems I can't use them on/with an input button? Thought I could potentially use it do display an asterisk for required fields. Not necessarily what I will do, just an option

input {
    position: relative;
}
input:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;
}

Same code works fine on an li

li {
    clear: both; 
    margin: 0 0 10px; 
    position: relative;
}
li:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;   
}

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

<span class="required"><input id="foo" /></span>