css - 选择框元素和 :after

Question

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

http://jsfiddle.net/86gb2/

Answer 1

在您的 fiddle 中，以下声明可能没有按照您的预期进行。

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>