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

【问题标题】：Which elements support the ::before and ::after pseudo-elements?哪些元素支持 ::before 和 ::after 伪元素？
【发布时间】：2011-04-02 02:19:48
【问题描述】：

我正在尝试为 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>s 没有::after？我在规范中找不到任何可以表明这一点的内容。

【问题讨论】：

为了记录，双冒号和单冒号是为了区分伪元素和伪类，因为人们将它们组合成一个名为“伪选择器”。

标签： html css forms pseudo-element

【解决方案1】：

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

【讨论】：

你有可悲的事实。 :( 如果支持<img>、<input> 和其他一些元素，则可以完成一些非常甜蜜的事情。例如带有 alt 属性的图像工具提示等。不过，谢谢！
@Web_Designer 同意，我只是将一些东西与<input> 和 after 选择器放在一起，它隐藏了输入可见性，但使用 :after 选择器在输入上显示了一个星号
这其实不太对。有一个特定类别的元素，包括和，还有，它们不受 CSS 的各种子集的影响，因为 W3C 假设这些将指定特定于操作系统的元素实施。这有点令人困惑，因为控件现在几乎完全遵循 CSS（但不是伪元素），而其他控件则不遵循。

【解决方案2】：

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

【讨论】：

不确定这是否已恢复，但 input 元素上的 ::after 似乎在 Chrome 21 或 Safari 5.1.7 (Windows) 中不起作用。 jsfiddle.net/V8cvQ/13

【解决方案3】：

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

<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>

【讨论】：