7

Why doesnt it work? Is there a work around for this without adding an extra element?

http://jsfiddle.net/86gb2/

2

2 Answers 2

14

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>
2
  • I know that. But i didnt think of it when it was for the select element..I used a wrapper instead, then it worked like i wanted :)
    – Rane
    Oct 5, 2012 at 14:41
  • Just a reminder that :after and :before don’t mean after or before the element, but after and before the content inside. In the case of a select element, any content that’s not an option element is invalid, so it’s ignored.
    – Manngo
    Nov 10, 2023 at 8:04
-3

I would recommend to use jQuery API for such things:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.