[SOLVED] ::after works in Chrome, Firefox & Safari but IE11 strips it out.

[alxfyv]

I’ve styled the <hr /> using in part the ::after pseudoelement. See this test page.

The markup and CSS are:
http://codepen.io/alxfyv/pen/pJxvjJ

The § sign is added using the ::after pseudoelement.

Everything works as expected in Chrome, Firefox and Safari but in IE11 not so much. IE11 strikes out all the property declarations for ::after leaving a null rule: hr::after {}.

Or see the screenshot on Screencast.

The questions are:
1. Why? and
2. How to make it work in IE 11?

[Paulie_D]

Technically no browser should support pseudo elements on self-closing elements (<br/>, <hr/>, <input /> etc) as they have no “internal space” to hold them but….some do so nevertheless.

This is what the W3c spec says

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. The ‘content’ property, in conjunction with these pseudo-elements, specifies what is inserted.

http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field

Obviously IE11 is stricter than the rest

Frankly, the default fallback you actually have in IE11 is good enough IMO.

[alxfyv]

Ahh … so much to learn!

Actually I read the spec but didn’t light on the phrase “an element’s … content“.

So obvious after it’s pointed out.

Thanks for an excellent answer.

(BTW what’s IMO?)

[Paulie_D]

IMO = IN MY OPINION

[Author]

Posts