css – 为什么：before和：after伪元素只能在Firefox中使用？

我创建了一个选择列表,其中包含以下选项：after和：之前的伪元素 – DEMO

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

但是这仅适用于Firefox,没有其他浏览器.

正如它在W3C,MDN,SitePoint中所述：after是“在匹配元素之后呈现并用于添加化妆品内容的伪元素”,并且没有人声明对它不能应用的元素的任何限制.

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

解决方法

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

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

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

原文地址：https://www.jb51.cc/css/216274.html