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

January 5, 2023 by Tarik

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');