title: How can I inspect and tweak :before and :after pseudo-elements in-browser?
body: <p>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 equivalent.</p>
  
  <p>Despite this feature being mentioned in <a href="http://www.webkit.org/blog/1091/more-web-inspector-updates/" rel="noreferrer">this WebKit/Safari blog post</a> (dated 2010), I can't find this feature at all in either Chrome or Safari. Chrome does at least have checkboxes to inspect :hover, :visited and :active states, but :before and :after are nowhere to be seen.</p>
  
  <p>Additionally, <a href="http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/" rel="noreferrer">this blog post</a> (dated 2009!) mentions this capability exists in the IE dev tools, but I'm currently using Mac OS, so this is no help to  me. Additionally, IE is not a browser I'm primarily targeting.</p>
  
  <p>Is there any way of inspecting these pseudo-elements?</p>
  
  <p>EDIT: In addition to being wrong about Firebug being unable to inspect these elements, I've found Opera to be pretty good at Inspecting :before and :after elements out of the box.</p>