How can I check and configure: before and: after pseudo-elements in a browser?

Question

I created fairly complex DOM elements with: after the pseudo-element, and I would like to be able to test and configure them in Chrome Inspector or Firebug or equivalent.

Despite this feature mentioned in this WebKit / Safari blog post (dated 2010), I can't find this feature at all in any Chrome or Safari at all. Chrome has at least checkboxes for checking: hover ,: visited and: active states, but: before and: after are nowhere to be seen.

Also, this blog post (dated 2009!) Mentions that this feature exists in IE dev tools, but I'm currently using Mac OS, so that doesn't help me. In addition, IE is not the browser in which I am primarily oriented.

Is there any way to check these pseudo-elements?

EDIT: Besides the fact that Firebug cannot check these elements, I found that Opera is very good at checking: before and: after the elements out of the box.

Answer 1

In Chrome Dev Tools, pseudo-element styles are visible in the panel:

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

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

• window.getComputedStyle
• document.querySelector

Answer 2

As with Chrome 31 players, the children of the parent element are displayed in the toolbox, as shown in the following image:

You can select them in the same way as a regular element, but if you delete the content style, then the pseudo-element will also be deleted and the devtools focus will change to its parent.

It seems that the inherited CSS styles are not viewable and you cannot edit the CSS content from the toolbar.

Answer 3

Chrome will not show: before and: after pseudo-elements in the DOM tree if they skip the "content" attribute. It must be installed, even if it is not installed.

This will not be displayed:

 :after { background-color: red; } 

This will be displayed in the inspector:

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

Hope this helps.

Answer 4

After many disappointments, I realized that firefox does not show pseudo-elements in the document tree at all , but if you select the exact element that has pseudo-element (s), then the styles for its pseudo-elements are shown in the style rules section on the right side. This is true for both firebug and the built-in inspector ("Q"), and I am shocked that no one knew about it before.

Obviously, the processing of chrome / chrome pseudo-elements is significantly superior because they can be selected (both in the document tree and directly on the page), and checked just like ordinary elements with layout, properties and everything else, regardless of their "owner".

The browser options I'm using now are: Chromium 40.0.2214.91, Firefox 31.3.0.

Answer 5

Firefox has got this feature for a while, just right-click, “check item” and view the before and after items in the inspector right panel.