CODEWITHSUNDEEP
cssbrowserpseudo-elementdeveloper-tools
rdoyle720
rdoyle720

Reputation: 3130

How do you view/debug :before and :after in a browser developer tools?

I'm trying to view/edit styles of an :after element in Developer Tools.

How may I find the rules associated to ::before and ::after pseudo-elements?

Upvotes: 4

Views: 2068

Answers (2)

CPHPython
CPHPython

Reputation: 13729

In Chromium browsers (e.g. Chrome, Brave and Edge), open the element's collapsed content and click on the automatically added ::after element:

Chromium browsers ::after pseudo-elemententer image description here

Firefox though has an independent Pseudo-elements section on the right pane after you click directly on the original element:

Firefox browser ::after pseudo-element

IE11 simply lists the ::after rule together with other element rules when you click on it:

IE11 browser ::after pseudo-element

Upvotes: 0

rdoyle720
rdoyle720

Reputation: 3130

Found it. You select the element that has the :after and the :after styles will be listed with the other styles for that element.

Upvotes: 5

Related Questions