Select box elements and :after

Question

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

look at this - http://stackoverflow.com/q/11903273/1499781 – Zoltan Toth Oct 04 '12 at 14:01 — Zoltan Toth, Oct 04 '12 at 14:01
http://stackoverflow.com/q/3532649/630321 – Konstant Oct 04 '12 at 14:07 — Konstant, Oct 04 '12 at 14:07

Kevin Boucher · Accepted Answer · 2018-01-24T19:35:27.617

13

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>

edited Jan 24 '18 at 19:35

answered Oct 04 '12 at 16:29

Kevin Boucher

16,426
3
48
55

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 05 '12 at 14:41

score -3 · Answer 2 · answered Oct 04 '12 at 14:09

-3

I would recommend to use jQuery API for such things:

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

answered Oct 04 '12 at 14:09

mschmoock

20,084
6
33
35

Select box elements and :after

2 Answers2