3

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

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

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

正如W3C、MDN、SitePoint中所述，它:after是一个“在匹配元素之后呈现并用于添加装饰性内容的伪元素”，并且没有人声明对它不能应用的元素有任何限制。

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

4

2 回答 2

6

是否存在限制是未定义的，因此行为不一致。这在规范中相关部分的底部提到：

笔记。该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。

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

于 2012-08-10T14:06:52.420 回答
1

你读过这个：: before 和 :after html 标签上的伪元素在 Chrome 中很奇怪吗？

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

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

于 2012-08-10T14:04:19.657 回答