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

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

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

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

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