我试图在输入字段上使用：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＞不能包含其他元素。
伪元素只能在容器元素上定义（或者更好地说，只支持）。因为它们的渲染方式在容器本身作为子元素。输入不能包含其他元素，因此不支持它们。另一方面，也是表单元素的按钮支持它们，因为它是其他子元素的容器。
如果你问我，如果某些浏览器确实在非容器元素上显示了这两个伪元素，那就是一个bug和一个非标准一致性。规范直接涉及元素内容。。。
W3C规范
如果我们仔细阅读规范，它实际上表明它们被插入到包含元素中：
作者使用：before和：after伪元素指定生成内容的样式和位置。正如它们的名称所示，：before和：after伪元素指定元素文档树内容前后的内容位置。“content”属性与这些伪元素一起指定插入的内容。
看见元素的文档树内容。据我理解，这意味着在容器内。
其他回答
奇怪的是，它可以处理某些类型的输入。至少在Chrome中，
<input type="checkbox" />
工作正常，与
<input type="radio" />
只是type=text和其他一些不起作用。
这里有另一种方法（假设您可以控制HTML）：在输入之后添加一个空的<span></span>，并在CSS中使用input.mystyle+span:after将其作为目标
.field包含错误{显示：内联；颜色：红色；}.field_with_errors输入+span：之后{内容：“*”}<div class=“field_with_errors”>标签：</div><div class=“field_with_errors”><input type=“text”/><span></span></div>
我在AngularJS中使用这种方法，因为它会自动将.ng无效类添加到＜input＞表单元素和表单中，但不会添加到＜label＞中。
问题提到“输入字段”。虽然我相信OP引用的是type=text、：：after和：：before的输入字段，但伪内容确实呈现了几种不同类型的输入字段：
input::before {
content: "My content" /* 11 different input types will render this */
}
这里是所有输入类型的全面演示，清楚地显示了哪些类型与（在本例中）：：before伪元素兼容。
总之，这是可以呈现伪内容的所有输入类型的列表：
复选框颜色日期本地日期时间文件形象月无线电广播范围时间周
当我遇到同样的问题时，我发现了这篇文章，这是对我有效的解决方案。与替换输入的值相反，只需删除它并在其后面绝对放置一个大小相同的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>
：在容器内渲染之前和之后
＜input＞不能包含其他元素。
伪元素只能在容器元素上定义（或者更好地说，只支持）。因为它们的渲染方式在容器本身作为子元素。输入不能包含其他元素，因此不支持它们。另一方面，也是表单元素的按钮支持它们，因为它是其他子元素的容器。
如果你问我，如果某些浏览器确实在非容器元素上显示了这两个伪元素，那就是一个bug和一个非标准一致性。规范直接涉及元素内容。。。
W3C规范
如果我们仔细阅读规范，它实际上表明它们被插入到包含元素中：
作者使用：before和：after伪元素指定生成内容的样式和位置。正如它们的名称所示，：before和：after伪元素指定元素文档树内容前后的内容位置。“content”属性与这些伪元素一起指定插入的内容。
看见元素的文档树内容。据我理解，这意味着在容器内。
