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

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.