我可以使用a：before还是：after伪
我试图在input字段上使用CSS伪元素:after ，但它不起作用。 如果我使用它span ，它工作正常。
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
这是有效的（在“buu！”之后和“更多”之前放置笑脸）
<span class="mystyle">buuu!</span>a some more
这不起作用 - 它只以红色着色一些值，但没有笑脸。
<input class="mystyle" type="text" value="someValue">
我究竟做错了什么？ 我应该使用另一个伪选择器吗？
注意：我无法在我的input添加一个span ，因为它是由第三方控件生成的。
:after和:before不支持在Internet Explorer 7和之下，任何元素。
它也不意味着用于替换的元素，如表单元素 （输入）和图像元素 。
换句话说，纯CSS是不可能的 。
但是，如果使用jQuery，你可以使用
$(".mystyle").after("add your smiley here");
.doc中的API文档
用javascript追加你的内容。 这将适用于所有浏览器。
:before和:after容器内渲染:after
和<input>不能包含其他元素。
伪元素只能在容器元素上定义（或者只支持更好的说明）。 因为它们呈现的方式在容器本身内是一个子元素。 input不能包含其他元素，因此它们不受支持。 另一方面，也是一个表单元素的button支持它们，因为它是其他子元素的容器。
如果你问我，如果某些浏览器确实在非容器元素上显示了这两个伪元素，这是一个错误和非标准的一致性。 规范直接谈论元素内容...
W3C规范
如果我们仔细阅读规范，它实际上是说它们被插入到一个包含元素中：
作者使用：before和：after伪元素指定生成内容的样式和位置。 正如它们的名称所表明的那样：before和之后：伪元素指定元素的文档树内容之前和之后的内容位置。 'content'属性与这些伪元素一起指定插入的内容。
看到？ 元素的文档树内容 。 据我了解，这意味着在一个容器内。
奇怪的是，它适用于某些类型的输入。 至少在Chrome中，
<input type="checkbox" />
工作正常，一样
<input type="radio" />
这只是type=text和其他一些不起作用的东西。