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

At least since Chrome 62 there's a setting in DevTools to 'Show user agent shadow DOM' which displays additional pseudo-elements like input placeholders, which wouldn't show up in the DOM tree otherwise.

More information: https://stackoverflow.com/a/26853319/3963594