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.

Answer 2

As of Chrome 31 pseudo elements show in the elements panel as child elements of their parent as shown in the following image:

You can select them as you would a normal element but if you remove the content style then the pseudo element will also be removed and the devtools focus will change to it's parent.

It appears that inherited CSS styles are not viewable and you can't edit CSS content from the elements panel.

Answer 3

After a lot of frustration, I figured out that firefox doesn't show the pseudo elements in the document tree at all, but if you select the exact element which has pseudo element(s) defined, then the styles for its pseudo element(s) are shown in the style rules section on the right side. This is true for both firebug and the built-in inspect ("Q"), and I am shocked that nobody bothered to explain this clearly before.

Clearly, chrome/chromium's handling of pseudo elements is vastly superior, as they can be selected (both in the document tree and directly on the page) and inspected just like regular elements, with layout, properties and everything else, independent of their "owner".

Browser versions I'm using currently: Chromium 40.0.2214.91, Firefox 31.3.0.

Answer 4

Firefox has had this feature for awhile now, just right click, "inspect element", and see the before and after elements in the right panel of the inspector.

Answer 5

In Chrome's Dev tools, the styles of a pseudo-element are visible in the panel:

Otherwise, you can also input the following line in the JavaScript console, and inspect the returned CSSStyleDeclaration object:

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

Answer 6

Select Element--> select hover checked ---> you can see ::before and after elements