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

Question

我已经使用：after伪元素创建了一些相当复杂的DOM元素，我希望能够在Chrome Inspector或Firebug或同等版本中对其进行检查和调整。

尽管this WebKit/Safari blog post中提到了此功能（日期为2010年），但在Chrome或Safari中我都找不到此功能。 Chrome浏览器至少具有复选框来检查：hover，：visited和：active状态，但是：before和：after看不到任何地方。

[另外，this blog post（2009年！）提到IE开发人员工具中存在此功能，但是我当前使用的是Mac OS，所以这对我没有帮助。另外，IE不是我主要针对的浏览器。

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

编辑：除了错误地认为Firebug无法检查这些元素之外，我发现Opera非常擅长于检查：before和：after元素。

Answer 1

在Chrome's Dev tools中，伪元素的样式在面板中可见：

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

CSSStyleDeclaration

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

Answer 2

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

“ >>

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

看来继承的CSS样式是not

可见的，并且您不能从“元素”面板中编辑CSS内容。

Answer 3

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

Answer 4

经过很多挫折后，我发现firefox不会在文档树中显示伪元素atall

Answer 5

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

Answer 6

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