我能在输入字段上使用:before或:after伪元素吗？
我能在输入字段上使用:before或:after伪元素吗？
我试图在一个字段上使用:after CSS伪元素，但它不起作用。如果我使用它与一起使用，它可以正常工作。
这个可以正常工作（在“buu！”之后和“some more”之前放置微笑）
buuu!a some more
这不起作用 - 它只将someValue变成红色，但没有微笑。
我做错了什么？我应该使用另一个伪选择器吗？
注意：我无法在我的周围添加一个，因为它是由第三方控件生成的。
admin 更改状态以发布 2023年5月24日
:after和:before在Internet Explorer 7及以下版本中不支持任何元素。
它也不应该用于替换元素，例如表单元素(输入)和图像元素。
换句话说，这在纯CSS中是不可能的。
然而，如果使用jquery，您可以使用
$(".mystyle").after("add your smiley here");
使用javascript附加您的内容。这将在所有浏览器中起作用。
:before和:after在容器内部渲染
元素不能包含其他元素。
伪元素只能在容器元素上定义，因为它们的渲染方式是作为子元素在容器本身内部进行。input不能包含其他元素，因此它们不受支持。另一方面，button作为表单元素也支持它们，因为它是其他子元素的容器。
如果你问我，如果有浏览器在非容器元素上显示这两个伪元素，那就是一个错误和不标准的遵从。规范直接谈论元素内容...
W3C规范
如果我们仔细阅读规范，它实际上说它们被插入在容器元素中：
作者可以使用:before和:after伪元素指定生成内容的样式和位置。正如它们的名称所示，在元素文档树内容之前和之后，伪元素:before和:after指定内容的位置。配合这些伪元素，'content'属性指定将插入的内容。
看到了吗？一个元素的文档树内容。据我理解，这意味着在容器内部。