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