Is there a way to use the mouse to make pseudo elements visible in Chrome Developer Tools?

Question

I'm trying to figure out where an element's location is being computed, like hovering over the element's line of code in the code window so that the margin, padding, etc, are shown. Is there a way to do this for pseudo-elements?

Edit: What I should say is I want to see something like the metrics, properties, etc window for pseudo-elements :before and :after. All I really want is to see their location on the screen.

Answer 1

Support for before/after elements is coming very soon! You should have it within the next month or so on Canary!

Answer 2

Yes, there is a way to force an elements state using chrome devtools; if you look on the right side you should see an icon that looks like the cursor with a broken box behind it on the 'styles' tab.

When you click on it, it will have a dropdown menu that will allow you to toggle the selected code's hover, active, focus and visited pseudo-classes.