Is it possible to inspect the "computed" styles for ::after and ::before pseudo elements?

Question

Chrome shows me the ::after and ::before definitions (and inherited definitions etc..) in the Matched CSS Rules pane when I inspect an element. But the Computed Styles pane displays only the computed styles for the root element.

I have a whole CSS class hierarchy for the pseudo elements with some properties inherited and some overridden etc, and would like to know if there is any way I can see the set of styles that actually got applied (i.e. what the computed styles pane shows for the root element)

If anyone can shed any light on this, that'll be extremely helpful.

Edit - 13th Feb, 2014

Recent versions of Chrome indeed has this feature built-in Perhaps this little thread had something to do with them including it?? :-)

Answer 1

window.getComputedStyle( element[, pseudoElt] )

pseudoElt Optional

A string specifying the pseudo-element to match. Must be omitted (or null) for regular elements. Pseudo-classes can be specified like ":focus".

I'm possibly misunderstanding what you're trying to accomplish, but here's some JavaScript to play with. I hope it's useful.

It iterates through every element in the document and attempts to get the content of its :befores and :afters.
If it finds any, it outputs the details to the console.
Simple, but demonstrable.

document.querySelectorAll( "*" ).forEach( ( e ) => {
  const ebc = window.getComputedStyle( e, ":before" ).content,
        eac = window.getComputedStyle( e, ":after" ).content;
  if ( ebc || eac ) {
    console.log( e );
    console.log( ( ebc ? "Before content = " + ebc : "No :before content" ) );
    console.log( ( eac ? "After content = " + eac : "No :after content" ) );
  }
} );

div:before {
  content: "This is a test.";
}
p:after {
  content: attr( data-content );
}
span:after {
  content: " dolor";
}

<div>
  <p data-content="&hellip;">Lorem <span>ipsum</span></p>
</div>