How to target ::before and ::after pseudo elements in Internet Explorer 9 Developer Tools?

Question

When inspecting elements in IE9 Developer Tools I can't see the pseudo elements I have defined in my CSS in the HTML pane:

However I can see them in the CSS pane, but they have strike-through suggesting the styles are being overridden, and hence have no effect when modifying them.

How do I target ::before and ::after elements for inspection in IE9?

Note: this may appear to be a duplicate of this question but in my case the elements are div container elements, so I don't think the answer to that question applies here.

Alkene

Pseudo elements aren't real elements! Hence they are only visible in the css section of the dev tools. – Dahl

Sure, but Chrome Developer Tools chooses to show them in the HTML section. Ok, so I'll accept that IE doesn't choose to show them there. But then the question remains: is there a way around the fact that they are strikethrough / ineffective in the CSS section? – Alkene

the strikethrough suggests they are being overwritten somewhere else in the document. – Dahl

Yes, that's what I would have thought. If I inspect the same element in Chrome however, there's no strikethrough, nothing with the same classes further up the cascade. Here's a fiddle: jsfiddle.net/simbasounds/z7s05znv/2 - If I inspect the .site-container selector in IE9, then click on the :before pseudo element in the CSS pane it has the strikethrough behaviour. – Alkene

Answer 1

Quoting from another answer:

IE 9 supports the notations ::after and ::before (with two colons) in “standards mode”. In “quirks mode”, it does not.

https://mcmap.net/q/895886/-are-css3-before-and-after-pseudo-elements-supported-by-ie9-or-not

So the only possible reason would be for something in you code to have activated the “quirks mode”

Denman