Select box elements and :after
css, pseudo-element, select
Solution
In your fiddle the following declaration is probably not doing what you expect.
select:after {content: "This doesn't work";}
This will actually append the text after the content of the select box, not after the select box itself. So that text is being added after the last `option` in the markup. (Which of course is neither valid, nor will it be rendered by the browser.)
In other words if you had this markup:
<a href="#">My link</a>
and this CSS:
a:after {content: " has now been appended to";}
What is actually happening is this:
<a href="#">My link has now been appended to</a>
Problem
Why doesnt it work? Is there a work around for this without adding an extra element? http://jsfiddle.net/86gb2/