Question

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

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

但是这仅适用于Firefox，没有其他浏览器。

正如W3C，MDN，SitePoint所述，:after是“在匹配元素后呈现的伪元素，用于添加化妆品内容“并且没有人声明对其无法应用的元素的任何限制。

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

Answer 1

是否存在限制是未定义的，因此行为不一致。这在spec：

的相关部分的底部提到

注意。此规范未完全定义：替换元素（例如HTML中的IMG）之前和之后的交互。这将在未来的规范中更详细地定义。

大多数HTML表单元素都被视为替换元素，包括select和option。

Answer 2

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

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

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

为什么：before和：after伪元素仅适用于Firefox？

2 个答案: