How can I inspect and tweak :before and :after pseudo-elements in-browser? How can I inspect and tweak :before and :after pseudo-elements in-browser? google-chrome google-chrome

How can I inspect and tweak :before and :after pseudo-elements in-browser?


In Chrome's Dev tools, the styles of a pseudo-element are visible in the panel:

Otherwise, you can also input the following line in the JavaScript console, and inspect the returned CSSStyleDeclaration object:

getComputedStyle(document.querySelector('html > body'), ':before');


As of Chrome 31 pseudo elements show in the elements panel as child elements of their parent as shown in the following image:

Screenshot

You can select them as you would a normal element but if you remove the content style then the pseudo element will also be removed and the devtools focus will change to it's parent.

It appears that inherited CSS styles are not viewable and you can't edit CSS content from the elements panel.


Chrome won't show :before and :after pseudo elements in the DOM-tree, if they miss "content" attribute. It should be set, even if it is set to nothing.

This won't show up:

:after {  background-color: red;}

This will show up in the inspector:

:after {  content: "";     background-color: red;    }

Hope it helps.