【问题标题】:Why the :before and :after pseudo-elements work only in Firefox?为什么 :before 和 :after 伪元素只在 Firefox 中有效?
【发布时间】:2012-09-19 00:01:24
【问题描述】:

我创建了一个 select 列表,其中包含 :after:before 伪元素的选项 - DEMO

option:after, option::before {
    content: " ";
    height: 5px;
    width: 5px;
    background: #c00;
    border-radius: 5px;
    display: inline-block;
}

但这仅适用于 Firefox,不适用于其他浏览器。

正如W3CMDNSitePoint 中所述,:after 是“在匹配元素之后呈现并用于添加装饰性内容的伪元素”,没有人说任何关于它不能应用到的元素的限制。

问题 - 为什么所有浏览器(FF 除外)都无法正确显示伪元素? 非常感谢任何文档。

【问题讨论】:

  • SitePoint 的描述不准确。 MDN 的描述更接近规范中的内容。

标签: css pseudo-element


【解决方案1】:

是否有限制是未定义的,因此行为不一致。这在spec相关部分的底部提到:

注意。本规范并未完全定义 :before 和 :after 与替换元素(如 HTML 中的 IMG)的交互。这将在未来的规范中更详细地定义。

大多数 HTML 表单元素都被视为替换元素,包括 selectoption

【讨论】:

【解决方案2】:

你读过这个::before and :after pseudo elements on html tag is wonky in Chrome 吗?

接受的答案说这是 Chrome 中的一个问题:

https://code.google.com/p/chromium/issues/detail?id=75544

【讨论】: