Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?

Asked 23/8, 2011 at 7:8 Answered 19/6, 2013 at 8:1

Solved css internet-explorer-9 css-selectors pseudo-element

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.

Howdah answered 23/8, 2011 at 7:8 Comment(6)

caniuse.com/#feat=css-sel2 Check the "Known issues" tab below the chart. – Greyback 3/1, 2013 at 18:25

@inhan: It doesn't say anything about IE9. – Hieratic 3/1, 2013 at 18:27

@Hieratic my bad, sorry. caniuse.com/#search=%3Aafter – Greyback 3/1, 2013 at 18:31

@inhan: Nothing about IE9 in there either... – Hieratic 3/1, 2013 at 18:32

@Hieratic look at the IE column and see the version numbers. Shall I post a screenshot? – Greyback 3/1, 2013 at 18:33

@inhan: Oh, I thought you meant to look at the Known Issues tab. My bad this time. – Hieratic 3/1, 2013 at 18:37

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.

Hieratic answered 23/8, 2011 at 7:10 Comment(2)

There's a difference between CSS2.1 and CSS3 and the colon and double colon. The double colon is used in CSS3 for pseudo-elements while the single colon is only used for pseudo-selectors. In CSS2.1, the single colon represented both. – Tsang 11/4, 2012 at 20:43

@Rob: "while the single colon is only used for pseudo-classes." Double colons and single colons were introduced precisely because people were munging both pseudo-elements and pseudo-classes together into a confusing umbrella term called "pseudo-selectors" while the single colon was being used to represent them both. – Hieratic 4/10, 2012 at 14:3

IE 9 supports the notations ::after and ::before (with two colons) in “standards mode”. In “quirks mode”, it does not. This can be tested e.g. 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">.

Collier answered 3/1, 2013 at 19:36 Comment(3)

This isn't entirely correct: because IE acts similarly to version 4 or 5 of itself when in quirks mode as stated in your article, anything that that version didn't support will be missing in quirks mode in any later version of IE. This means :after and :before in both the old and new notations won't be supported in quirks mode on any version of IE. – Hieratic 4/1, 2013 at 16:8

Note also that compatibility mode in IE8+ is significantly different to quirks mode in that compatibility mode emulates IE7, whereas quirks mode emulates IE4/5. – Hieratic 4/1, 2013 at 16:14

@BoltClock, thanks, I stand corrected and will edit my answer accordingly. – Collier 4/1, 2013 at 16:32

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.

Nocturnal answered 19/6, 2013 at 8:1 Comment(0)

Recommended topics

Hot tags