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');
window.getComputedStyledocument.querySelector
As of Chrome 31 pseudo elements show in the elements panel as child elements of their parent as shown in the following image:
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.