我试图在输入字段上使用：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">
我做错了什么？我应该使用另一个伪选择器吗？
注意：我不能在输入周围添加跨度，因为它是由第三方控件生成的。
当前回答
当我遇到同样的问题时，我发现了这篇文章，这是对我有效的解决方案。与替换输入的值相反，只需删除它并在其后面绝对放置一个大小相同的span，span可以使用您选择的图标字体将：before伪类应用于它。
<style type="text/css">
form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>
<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>
其他回答
总结
它不适用于<inputtype=“button”>，但适用于<输入type=“checkbox”>。
小提琴：http://jsfiddle.net/gb2wY/50/
HTML格式：
<p class="submit">
<input id="submit-button" type="submit" value="Post">
<br><br>
<input id="submit-cb" type="checkbox" checked>
</p>
CSS:
#submit-button::before,
#submit-cb::before {
content: ' ';
background: transparent;
border: 3px solid crimson;
display: inline-block;
width: 100%;
height: 100%;
padding: 0;
margin: -3px -3px;
}
这里最大的误解是单词前后的意思。它们不是指元素本身，而是指元素中的内容。因此，元素：before在内容之前，元素：after在内容之后，但两者仍在原始元素内部。
input元素在CSS视图中没有内容，因此没有：before或：after伪内容。这适用于许多其他无效或替换的元素。
元素外部没有引用的伪元素。
在另一个宇宙中，这些伪元素可能被称为其他元素，以使这种区别更清晰。甚至有人提出了一个真正在元素之外的伪元素。到目前为止，在这个宇宙中情况并非如此。
问题提到“输入字段”。虽然我相信OP引用的是type=text、：：after和：：before的输入字段，但伪内容确实呈现了几种不同类型的输入字段：
input::before {
content: "My content" /* 11 different input types will render this */
}
这里是所有输入类型的全面演示，清楚地显示了哪些类型与（在本例中）：：before伪元素兼容。
总之，这是可以呈现伪内容的所有输入类型的列表：
复选框颜色日期本地日期时间文件形象月无线电广播范围时间周
奇怪的是，它可以处理某些类型的输入。至少在Chrome中，
<input type="checkbox" />
工作正常，与
<input type="radio" />
只是type=text和其他一些不起作用。
正如其他人所解释的，输入有点被替换为空元素，所以大多数浏览器不允许您在其中生成：：before或：：after伪元素。
然而，CSS工作组正在考虑在输入具有外观：none的情况下显式允许：：before和：：after。
从…起https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,
Safari和Chrome都允许在表单输入上使用伪元素。其他浏览器没有。我们曾考虑删除此项，但使用计数器正在记录大约0.07%的使用它的页面，这是我们最大值的20倍移除阈值。实际上，在输入上指定伪元素需要指定输入的内部结构至少在某种程度上，我们没有我不相信我们能做到）。但鲍里斯建议，在其中一个错误线程中，允许它出现：无输入-基本上只是将它们转换为＜div＞s，而不是“有点被替换”的元素。
