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

Question

我用 :after 伪元素创建了一些相当精细的 DOM 元素，我希望能够在 Chrome Inspector 或 Firebug 或同等产品中检查和调整它们。

尽管此WebKit/Safari 博客文章（日期为 2010 年）中提到了此功能，但我在 Chrome 或 Safari 中都找不到此功能。Chrome 至少有检查 :hover、:visited 和 :active 状态的复选框，但 :before 和 :after 无处可见。

此外，这篇博文（日期为 2009 年！）提到 IE 开发工具中存在此功能，但我目前使用的是 Mac OS，所以这对我没有帮助。此外，IE 不是我主要针对的浏览器。

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

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

score 65 · Accepted Answer

在Chrome 的开发工具中，伪元素的样式在面板中是可见的：

否则，您也可以在 JavaScript 控制台中输入以下行，并检查返回的CSSStyleDeclaration对象：

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

score 36 · Accepted Answer

从 Chrome 31 开始，伪元素在元素面板中显示为其父元素的子元素，如下图所示：

您可以像选择普通元素一样选择它们，但如果删除content样式，则伪元素也将被删除，并且 devtools 焦点将更改为它的父元素。

继承的 CSS 样式似乎不可见，并且您无法从元素面板编辑 CSS 内容。

score 26 · Accepted Answer

Chrome 不会在 DOM 树中显示 :before 和 :after 伪元素，如果它们缺少“content”属性。它应该被设置，即使它被设置为空。

这不会出现：

:after {
  background-color: red;
}

这将显示在检查器中：

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

希望能帮助到你。

score 5 · Accepted Answer

在经历了很多挫折之后，我发现firefox根本没有在文档树中显示伪元素，但是如果你选择了定义了伪元素的确切元素，那么它的伪元素的样式) 显示在右侧的样式规则部分。对于萤火虫和内置检查（“Q”）都是如此，我很震惊之前没有人费心解释清楚这一点。

显然，chrome/chromium 对伪元素的处理非常出色，因为它们可以像常规元素一样被选择（在文档树中和直接在页面上）和检查，具有布局、属性和其他所有内容，独立于它们的“所有者” ”。

我目前使用的浏览器版本：Chromium 40.0.2214.91、Firefox 31.3.0。

score 5 · Accepted Answer

至少从 Chrome 62 开始，DevTools 中有一个设置为“显示用户代理影子 DOM”，它显示额外的伪元素，如输入占位符，否则不会出现在 DOM 树中。

score 1 · Accepted Answer

Firefox 有这个功能已经有一段时间了，只需右键单击“检查元素”，然后在检查器的右侧面板中查看之前和之后的元素。

score 1 · Accepted Answer

1

Select Element--> select hover checked ---> 可以看到 ::before 和 after 元素

于 2020-04-29T11:08:52.227 回答

7 回答 7