Display :before & :after defined for an element in the DOM tree
If a DOM element have either a :before or :after pseudo-element with content different than none, a :before/:after entry is displayed in the DOM at their respective position. That entry, once selected, allow to display the styles for it in the properties view.
This just landed and should be available in today's Nightly.
This will likely come in the same patch as the Shadow DOM support, which is coming along nicely.
Sorry, the real bug is here: https://bugzilla.mozilla.org/show_bug.cgi?id=920141 ( the last one was a dupe )
Peter Chon commented
chrome developer tool does a great job. It would be great to see something similar.
Moritz Gießmann commented
You should also consider showing shadow DOM elements.
I've logged this bug ( I couldn't find an existing one ):
Cédric Néhémie commented
@twidi: sure, and even highlight them in the page as for any other DOM tree entries.
@jgriffiths: it's nice to hear that, I guess it's quite logical as more and more stuff is done with them nowadays. In addition, if any other pseudo-elements selector could be displayed as well it would be even nicer (I think of &:-moz-placeholder/:placeholder, ::-moz-range-thumb and ::-moz-range-track)
It would be great, we could see dimensions for pseudo-elements