我试图在输入字段上使用：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 }
其他回答
我使用背景图像为必填字段创建了红点。
input[type="text"][required] {
background-image: radial-gradient(red 15%, transparent 16%);
background-size: 1em 1em;
background-position: top right;
background-repeat: no-repeat
}
在Codepen上查看
当我遇到同样的问题时，我发现了这篇文章，这是对我有效的解决方案。与替换输入的值相反，只需删除它并在其后面绝对放置一个大小相同的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>
如果您试图使用：before和：after来设置输入元素的样式，那么很可能您试图模仿CSS堆栈中其他span、div甚至某个元素的效果。
正如Robert Koritnik的回答所指出的，：before和：after只能应用于容器元素，而输入元素不是容器。
然而，HTML5引入了button元素，它是一个容器，其行为类似于input[type=“submit | reset”]元素。
<style>
.happy:after { content:url(smiley.gif); }
</style>
<form>
<!-- won't work -->
<input class="happy" type="submit" value="Submit" />
<!-- works -->
<button class="happy">Submit</button>
</form>
正如其他人所解释的，输入有点被替换为空元素，所以大多数浏览器不允许您在其中生成：：before或：：after伪元素。
然而，CSS工作组正在考虑在输入具有外观：none的情况下显式允许：：before和：：after。
从…起https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,
Safari和Chrome都允许在表单输入上使用伪元素。其他浏览器没有。我们曾考虑删除此项，但使用计数器正在记录大约0.07%的使用它的页面，这是我们最大值的20倍移除阈值。实际上，在输入上指定伪元素需要指定输入的内部结构至少在某种程度上，我们没有我不相信我们能做到）。但鲍里斯建议，在其中一个错误线程中，允许它出现：无输入-基本上只是将它们转换为＜div＞s，而不是“有点被替换”的元素。
尽管有解释指出Firefox不允许：：after和：：before内容用于无法显示任何内容的元素的行为是正确的，但这一规则似乎仍然适用：
input[type=checkbox] {
-moz-appearance: initial;
}
由于：：after是重新设置复选框或单选框样式的唯一方法，而不会引入更多无关的标记，如尾随跨度或标签，我认为可以强制Firefox允许显示：：before和：：aft内容，尽管不符合规范。
