哪些元素支持 ::before 和 ::after 伪元素？

Question

我正在尝试为 HTML5 中的<input>提供一些很好的默认样式，并尝试了以下操作：

input::after         { display: inline; }
input:valid::after   { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }

唉， ::after内容永远不会出现。 伪元素的双冒号和单冒号不是问题； 我两个都试过了。 拥有一个伪元素和一个伪类也不是问题； 我试过没有:valid和:invalid 。 我在 Chrome、Safari 和 Firefox 中得到了相同的行为（Firefox 没有:valid和:invalid伪类，但我尝试了没有这些。）

伪元素在<div> 、 <span> 、 <p>和<q>元素上运行良好——其中一些是块元素，一些是内联元素。

所以，我的问题是：为什么浏览器同意<input>没有::after ？ 我在规范中找不到任何表明这一点的内容。

Answer 1

正如您可以在这里阅读http://www.w3.org/TR/CSS21/generate.html ， :after 仅适用于具有（文档树）内容的元素。 <input>没有内容，还有<img>或<br> 。

Answer 2

您可以在元素之前或之后放置一个跨度。 例如：

 <style> #firstName:invalid+span:before { content: "** Not OK **"; color: red; } #firstName:valid+span:before { content: "** OK **"; color: green; } </style> <input type="text" name="firstName" id="firstName" placeholder="John" required="required" title="Please enter your first name (eg John )" /><span>&nbsp;</span>

Answer 3

Webkit 允许您在输入元素上执行 ::after。 如果您想要一种使其在 Firefox 中工作的方法，您可以尝试在输入的标签上使用 ::after 而不是输入本身。