Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
Question
On this MS compatibility table it says, IE9 does not support pseudo-elements ::before and ::after , but when I try it seems it does... see JSBin
Am I doing something wrong? I thought ::before and ::after would be nice tools to hide stuff from IE9, when in fact, they don't.
3 answers
solution1
27 ACCPTED 2011-08-23 07:10:34
The CSS2 pseudo-elements :before and :after , with the traditional single-colon notation, are supported by IE8 and later. They are not new to CSS3.
The double-colon notation, on the other hand, is new to CSS3 . IE9 does support this new notation for ::before and ::after , and likewise for the CSS1 pseudo-elements ::first-line and ::first-letter . Going forward, however, no new pseudo-element may use the single colon syntax, and browsers (including IE) are expected to support the double colon syntax for all pseudo-elements.
I have no clue why that table says IE9 doesn't support the new pseudo-element syntax, because it certainly does according to the docs for the individual selectors linked above, and your test case. As well as, of course, this answer.
solution2
5 2013-01-03 19:36:53
IE 9 supports the notations ::after and ::before (with two colons) in “standards mode”. In “quirks mode”, it does not. This can be tested eg as follows:
<style>
p::after {
content: "***AFTER***";
}
</style>
<p>Hello world
Here the CSS rule is ignored, because IE 9 goes to quirks mode. But if you add the following line at the very start, IE 9 goes to standards mode and the CSS rule takes effect:
<!doctype html>
It is common in IE 9 that in quirks mode , new CSS features (most features that are neither in CSS 2.1 or in the IE legacy) are not supported. In quirks mode, IE 9 does not support the old one-colon notations :after and :before either. It supports them (but not the two-colon versions) in “IE 8 mode”, which you can select in developer tools (F12) manually, in the “document mode” menu, or at document level using the tag <meta http-equiv="X-UA-Compatible" content="IE=8"> .
solution3
1 2013-06-19 08:01:52
As quoted from http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors
CSS3 pseudo-element double colon syntax Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { ... }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.