为什么：before和：after伪元素只在Firefox中工作？ [英] Why the :before and :after pseudo-elements work only in Firefox?

问题描述

我创建了一个 select 列表，其中包含：和< 伪元素 - DEMO

I've created a select list with options having :after and :before pseudo-elements - DEMO

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

但是这只能在Firefox中使用，没有其他浏览器。

However this works in Firefox only and no other browser.

正如 W3C ， MDN ， SitePoint < a> ：之后是在匹配元素后呈现的用于添加化妆品内容的伪元素

As it stated on W3C, MDN, SitePoint the :after is a "pseudo-element rendered after the matched element and used to add cosmetic content" and nobody states any restriction about elements it can't be applied to.

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

Question - why all the browsers (except FF) can't properly display the pseudo-elements? Any documentation is greatly appreciated.

推荐答案

是否有限制是未定义的，因此不一致的行为。这在规范

Whether there is a restriction is undefined, hence the inconsistent behavior. This is mentioned at the bottom of the relevant section in the spec:

注意。本规范没有完全定义以下内容的交互：元素（如HTML中的IMG）。

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表单元素都被视为替换元素，包括选择和选项。

Most HTML form elements are considered replaced elements, including select and option.

这篇关于为什么：before和：after伪元素只在Firefox中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！