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

91

我已经使用：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元素。

— 麦杰森
source

1

使用萤火虫，您可以检查那些伪元素的样式。

— Fabrizio Calderan '04年6

@ F.Calderan怎么样？如果我修改页面，它会更新页面吗？

— majackson '04

是的，我能够通过Fx11 / MacOS上的Firebug 1.9.1更改伪元素的属性

— Fabrizio

是的，我也看到了。抱歉，我误将Firefoxes的新内置开发工具（以前没有使用过ID）用于某种Firebug重新设计，而功能却少了很多。我的立场是正确的;）

— 杰克逊（majackson

检查此答案以测试chrome和firefox中的伪元素stackoverflow.com/a/20716179/1868660

— Subodh Ghulaxe 2013年

61

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

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

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

— 罗伯·W
source

9

我没看到您正在检查什么元素以使其出现在面板中？另外，您使用的是哪个版本的Chrome？

— majackson

@majackson Chrome 18.0 Ubuntu 11.10。x在此演示中检查：jsfiddle.net/2M6JA

— Rob W

我在您的演示中看到了伪类，但在我的代码中却没有，这使我怀疑自己还有另一个不同的问题。无论如何，很明显您是正确的，因此我将其标记为已解决-非常感谢！

— majackson '04

它接缝了：pseudo样式在某些情况下无法检查。查看@Rob W小提琴的这个fork：jsfiddle.net/RQsY6 =>无法检查标签上的伪元素。

— 法比恩·夸特拉沃

1

@FabienQuatravaux至少在Chrome 23中，我看到div::before了content: 'x';-屏幕截图：i.stack.imgur.com/nQ2TZ.png。编辑：我们的小提琴完全没有不同。您要替换div为a吗？尽管如此，仍然可以检查伪元素：jsfiddle.net/RQsY6/1（只需在DOM树中选择锚标记）。

— 罗伯W

31

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

屏幕截图

您可以像选择普通元素一样选择它们，但是如果删除content样式，则还将删除伪元素，并且devtools焦点将变为其父元素。

看来继承的CSS样式是不可见的，并且您不能从Elements面板编辑CSS内容。

— AMK
source

1

H！谢谢您：)

— R Claven '18

22

如果DOM元素缺少“ content”属性，Chrome将不会显示：before和：after伪元素。即使将其设置为空，也应将其设置。

这不会显示：

:after {
  background-color: red;
}

这将显示在检查器中：

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

希望能帮助到你。

— 流行音乐
source

5

经过很多挫折之后，我发现firefox根本不在文档树中显示伪元素，但是如果您选择了已定义伪元素的确切元素，则其伪元素的样式）显示在右侧的样式规则部分。萤火虫和内置检查（“ Q”）都是如此，令我震惊的是，以前没人愿意清楚地解释这一点。

显然，铬/铬对伪元素的处理要优越得多，因为可以像选择常规元素一样选择和检查伪元素，无论是在文档树中还是直接在页面上，它们的布局，属性和所有其他方面都与它们的“所有者”无关”。

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

— aditsu退出，因为SE无效
source

1

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

— 无臭虫
source

1

我没有看到:after和:before伪元素“本土化”检查工具-切换伪元素给了我hover，active并focus只。我可以在Firebug中看到它们。

— Sameers 2015年

@sameers您是否在谈论右键菜单上的切换？因为：before和：after不是您在此处切换的内容，所以它们应始终显示在css检查器中。

— NoBugs 2015年

0

选择元素->选择悬停检查--->您可以看到:: before和after元素

— 瓦苏
source

0

至少从Chrome 62开始，DevTools中有一个设置为“显示用户代理阴影DOM”，该设置显示其他伪元素（如输入占位符），否则不会显示在DOM树中。

— 刚索
source