Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

When inspecting elements in IE9 Developer Tools I can't see the pseudo elements I have defined in my CSS in the HTML pane: IE9 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. IE9 CSS pane

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.

like image 224
simbasounds Avatar asked Nov 16 '15 09:11

simbasounds


People also ask

What is :: before and :: after?

The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.

What is pseudo-element explain with Example A :: before?

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

What are before and after pseudo elements?

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.

What is :: before in CSS?

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

How do you inspect pseudo elements?

Pseudo classes on elements can be triggered to investigate how an element may react if it were to be hovered over for example. You can right click on a node in the Elements panel and select Force element state. Alternatively, the Toggle element state icon can be clicked on in the Styles sub-pane.


1 Answers

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://stackoverflow.com/a/14145917/5973334

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

like image 133
Kuzeko Avatar answered Sep 17 '22 01:09

Kuzeko