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

Question

我正在尝试为HTML5中的<input>s设计一些很好的默认样式，并尝试了以下方法：

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只适用于包含(文档树)内容的元素。与<img>或<br>一样，<input>也没有内容。

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 (e.g. John )" 
/><span>&nbsp;</span>

​

Answer 3

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