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

Chrome won't show :before and :after pseudo elements in the DOM-tree, if they miss "content" attribute. It should be set, even if it is set to nothing.

This won't show up:

:after {
  background-color: red;
}

This will show up in the inspector:

:after {
  content: "";   
  background-color: red;    
}

Hope it helps.