Select window items and: after

Question

Why doesn't it work? Is there any work for this without adding an extra element?

http://jsfiddle.net/86gb2/

Answer 1

In your fiddle, the following declaration probably does not do what you expect.

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

This will actually add text after the content in the selection field, and not after the selection window itself. So the text is added after the last option in the markup. (Which, of course, is not valid and will not be displayed by the browser.)

In other words, if you have this markup:

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

and this CSS:

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

What really happens:

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

Answer 2

I would recommend using jQuery API for such things:

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