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

Question

I have created some fairly elaborate DOM elements with an :after pseudo-element, and I\'d like to be able to inspect and tweak them in either Chrome Inspector or Firebug or

Answer 1

After a lot of frustration, I figured out that firefox doesn't show the pseudo elements in the document tree at all, but if you select the exact element which has pseudo element(s) defined, then the styles for its pseudo element(s) are shown in the style rules section on the right side. This is true for both firebug and the built-in inspect ("Q"), and I am shocked that nobody bothered to explain this clearly before.

Clearly, chrome/chromium's handling of pseudo elements is vastly superior, as they can be selected (both in the document tree and directly on the page) and inspected just like regular elements, with layout, properties and everything else, independent of their "owner".

Browser versions I'm using currently: Chromium 40.0.2214.91, Firefox 31.3.0.