css - 选择框元素和 :after

Question

为什么它不起作用？是否可以在不添加额外元素的情况下解决此问题？

http://jsfiddle.net/86gb2/

Answer 1

在您的小提琴中，以下声明可能没有达到您的预期。

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

这实际上会将文本附加到选择框的内容之后，而不是选择框本身之后。因此，该文本被添加option到标记中的最后一个之后。（这当然是无效的，也不会被浏览器呈现。）

换句话说，如果你有这个标记：

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

这个CSS：

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

实际发生的是这样的：

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

Answer 2

我建议对这些事情使用 jQuery API：

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