如何在浏览器中检查和调整: before 和: after 伪元素？

我已经用: after 伪元素创建了一些相当复杂的 DOM 元素，我希望能够在 Chrome 检查器或 Firebug 或相应的程序中检查和调整它们。

尽管在 这篇 WebKit/Safari 博客文章(2010年)中提到了这个特性，但我在 Chrome 或 Safari 中都找不到这个特性。Chrome 至少有复选框可以检查: hover、 : vised 和: active 状态，但是: before 和: after 不会出现。

此外，这篇博文(日期: 2009年!)提到 IE 开发工具中存在这个功能，但是我目前使用的是 Mac OS，所以这对我没有帮助。此外，IE 并不是我主要的目标浏览器。

有办法检查这些伪元素吗？

编辑: 除了 Firebug 无法检查这些元素的错误之外，我还发现 Opera 非常擅长检查: before 和: after 开箱即用的元素。

99056 次浏览
小开
最佳答案

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');
小开

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

Screenshot

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.

小开

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.

小开

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.

小开

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.

小开

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

小开

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


提交答案