Wählen Sie Box-Elemente und: nach

Question

Warum funktioniert das nicht? Gibt es dafür eine Arbeit, ohne ein zusätzliches Element hinzuzufügen?

http://jsfiddle.net/86gb2/

Answer 1

In Ihrer Geige die folgende Erklärung ist wahrscheinlich nicht das, was Sie erwarten.

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

anhängen Dies wird tatsächlich den Text nach dem Inhalt der Auswahlbox, nicht nach dem Auswahlfeld selbst. Damit wird der Text nach dem letzten option im Markup hinzugefügt. (Was natürlich weder gültig, noch wird es vom Browser gerendert werden.)

Mit anderen Worten, wenn Sie diese Markup haben:

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

und diese CSS:

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

Was tatsächlich geschieht, ist dies:

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

Answer 2

Ich würde empfehlen, für solche Dinge jQuery API zu verwenden:

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