哪些元素支持:: before和:: after伪元素？
我试图为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 ？ 我无法在规范中find任何可以表明这一点的内容。
正如你可以在这里阅读http://www.w3.org/TR/CSS21/generate.html ，：仅适用于具有（文档树）内容的元素。 <input>没有内容，也没有<img>或<br> 。
Webkit让你在input元素之后::。 如果你想在Firefox中使用它，你可以在input标签上使用:: after而不是input本身。
您可以在元素之前或之后放置一个范围。 例如：
<style> #firstName:invalid+span:before { content: "** Not OK **"; color: red; } </style> <input type="text" name="firstName" id="firstName" placeholder="John" required="required" title="Please enter your first name (eg John )" /><span> </span>
