Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

css - Why the :before and :after pseudo-elements work only in Firefox?

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;
}

However this works in Firefox only and no other browser.

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.

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Whether there is a restriction is undefined, hence the inconsistent behavior. This is mentioned at the bottom of the relevant section in the 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.

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...