我试图在输入字段上使用：after CSS伪元素，但它不起作用。如果我将其与跨度一起使用，它可以正常工作。
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
这是有效的（将笑脸放在“buu！”之后，然后放在“somemore”之前）
<span class="mystyle">buuu!</span>a some more
这不起作用-它只将someValue涂成红色，但没有笑脸。
<input class="mystyle" type="text" value="someValue">
我做错了什么？我应该使用另一个伪选择器吗？
注意：我不能在输入周围添加跨度，因为它是由第三方控件生成的。
当前回答
您不能在输入元素中放置伪元素，但可以放置阴影元素，如占位符！
input[type="text"] {
&::-webkit-input-placeholder {
&:before {
// your code
}
}
}
要使其在其他浏览器中工作，请在不同的选择器中使用：-moz占位符、：：-moz placeholder和：-ms input placeholder。无法对选择器进行分组，因为如果浏览器无法识别选择器，则整个语句将无效。
更新：以上代码仅适用于CSS预处理器（SASS、LESS…），不使用预处理器：
input[type="text"]::-webkit-input-placeholder:before { // your code }
其他回答
：after和：before在Internet Explorer 7及以下版本中不受任何元素的支持。
它也不能用于替换的元素，如表单元素（输入）和图像元素。
换句话说，使用纯CSS是不可能的。
但是，如果使用jquery，则可以使用
$(".mystyle").after("add your smiley here");
之后的API文档
使用javascript附加内容。这将适用于所有浏览器。
：在容器内渲染之前和之后
＜input＞不能包含其他元素。
伪元素只能在容器元素上定义（或者更好地说，只支持）。因为它们的渲染方式在容器本身作为子元素。输入不能包含其他元素，因此不支持它们。另一方面，也是表单元素的按钮支持它们，因为它是其他子元素的容器。
如果你问我，如果某些浏览器确实在非容器元素上显示了这两个伪元素，那就是一个bug和一个非标准一致性。规范直接涉及元素内容。。。
W3C规范
如果我们仔细阅读规范，它实际上表明它们被插入到包含元素中：
作者使用：before和：after伪元素指定生成内容的样式和位置。正如它们的名称所示，：before和：after伪元素指定元素文档树内容前后的内容位置。“content”属性与这些伪元素一起指定插入的内容。
看见元素的文档树内容。据我理解，这意味着在容器内。
正如其他人所解释的，输入有点被替换为空元素，所以大多数浏览器不允许您在其中生成：：before或：：after伪元素。
然而，CSS工作组正在考虑在输入具有外观：none的情况下显式允许：：before和：：after。
从…起https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,
Safari和Chrome都允许在表单输入上使用伪元素。其他浏览器没有。我们曾考虑删除此项，但使用计数器正在记录大约0.07%的使用它的页面，这是我们最大值的20倍移除阈值。实际上，在输入上指定伪元素需要指定输入的内部结构至少在某种程度上，我们没有我不相信我们能做到）。但鲍里斯建议，在其中一个错误线程中，允许它出现：无输入-基本上只是将它们转换为＜div＞s，而不是“有点被替换”的元素。
：before和：after应用于容器内部，这意味着您可以将其用于带有结束标记的元素。
它不适用于自动关闭元件。
另一方面，自动关闭的元素（如img/hr/input）也称为“替换元素”，因为它们被替换为各自的内容。“外部对象”，因为缺少更好的术语。这里读得更好
根据CSS2.1规范中的注释，该规范“没有完全定义：before和：after与替换元素（如HTML中的IMG）的交互。这将在未来的规范中进行更详细的定义。”尽管input不再是真正的替换元素，基本情况没有改变：：before和：after对它的影响未指明，通常没有影响。
解决方案是找到一种不同的方法来解决您试图以这种方式解决的问题。将生成的内容放入文本输入控件会非常误导：对用户来说，它似乎是控件中初始值的一部分，但无法修改，因此它似乎是在控件开始时强制的，但不会作为表单数据的一部分提交。
