Seleziona elementi casella e: dopo

Question

Perché non funziona? C'è un aggiro per questo senza aggiungere un elemento in più?

http://jsfiddle.net/86gb2/

Answer 1

Nel vostro violino la seguente dichiarazione non è probabilmente facendo quello che ci si aspetta.

select:after {content: "This doesn't work";} 

Questo effettivamente aggiungere il testo dopo che il contenuto della casella di selezione, non dopo la casella di selezione stessa. In modo che il testo venga aggiunto dopo l'ultimo option nel markup. (Che naturalmente non è né valida, né sarà reso dal browser.)

In altre parole se si ha questo markup:

<a href="#">My link</a> 

e questo CSS:

a:after {content: " has now been appended to";} 

Cosa sta effettivamente accadendo è questo:

<a href="#">My link has now been appended to</a> 

Answer 2

mi sento di raccomandare di utilizzare jQuery API per queste cose:

$(document).ready(function(){ 
    $("select").after("<div>this doesnt work, or does it?</div>"); 
});​