哪些元素支持 ::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？我在规范中找不到任何有关这一点的信息。

- James A. Rosen

---

记录一下，双冒号和单冒号旨在区分伪元素和伪类，因为人们将它们混合在一起成为一个称为“伪选择器”的大类。 - BoltClock

Answer 1

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

- davehauser

---

你说的很有道理。:( 如果支持<img>、<input>和其他一些元素，就可以实现一些非常棒的功能，比如带有alt属性的图像工具提示等等。无论如何，还是谢谢！ - Web_Designer

@Web_Designer 同意，我刚刚用<input>和:after选择器组合了一些东西，它可以隐藏输入框的可见性，但在输入框上显示一个星号。 - Josh Bedo

这实际上并不完全正确。有一类特定的元素，包括<img>和<input>，但也包括<select>...</select>，它们对于各种子集的CSS是免疫的，因为W3C假设这些会指定特定于操作系统的实现。这有点令人困惑，因为<input>控件现在基本上完全遵守CSS（但不包括伪元素），而其他控件则不是这样。 - podperson

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>

- cobberboy

Answer 3

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

- Andrew Philpott

---

不确定是否已经恢复，但在Chrome 21或Safari 5.1.7（Windows）上，input元素上的::after似乎无法正常工作。http://jsfiddle.net/V8cvQ/13/ - MrWhite