我可以在输入字段上使用 :before 或 :after 伪元素吗？

Question

我正在尝试在 input 字段上使用 :after CSS 伪元素，但它不起作用。如果我将它与 span 一起使用，它就可以正常工作。

 <style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

这有效（将笑脸放在“buu！”之后和“更多”之前）

 <span class="mystyle">buuu!</span>a some more

这不起作用 - 它只将 someValue 涂成红色，但没有笑脸。

 <input class="mystyle" type="text" value="someValue">

我究竟做错了什么？我应该使用另一个伪选择器吗？

注意：我无法在我的 span 周围添加 input ，因为它是由第三方控件生成的。

原文由 matra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

:after 和 :before 在 Internet Explorer 7 及以下版本的任何元素上均不受支持。

它也不意味着用于替换元素，例如 form elements (inputs) 和 image elements 。

换句话说，纯 CSS 是 不可能 的。

但是，如果使用 jquery ，您可以使用

$(".mystyle").after("add your smiley here");

.after 上的 API 文档

使用 javascript 附加您的内容。这将适用于所有浏览器。

原文由 Alex 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

:before 和 :after 在容器内渲染

并且 不能包含其他元素。

---

伪元素只能在容器元素上定义（或者更好的说法是只支持）。因为它们呈现的方式是 在 容器本身内作为子元素。 input 不能包含其他元素，因此它们不受支持。 A button 另一方面也是支持它们的表单元素，因为它是其他子元素的容器。

如果你问我，如果某些浏览器 确实 在非容器元素上显示这两个伪元素，这是一个错误和不符合标准。规范直接谈论元素内容……

W3C规范

如果我们仔细阅读 规范，它实际上说它们被插入 到 一个包含元素中：

作者使用 :before 和 :after 伪元素指定生成内容的样式和位置。顾名思义，:before 和 :after 伪元素指定元素的文档树内容之前和之后的内容位置。 ‘content’ 属性与这些伪元素一起指定插入的内容。

看？ _元素的文档树 内容_。据我了解，这意味着 在 容器内。

原文由 Robert Koritnik 发布，翻译遵循 CC BY-SA 3.0 许可协议