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

Question

我使用:after伪元素创建了一些相当复杂的DOM元素，我想要在Chrome Inspector或Firebug或等效工具中检查和调整它们。

尽管这个功能在2010年的WebKit/Safari博客文章中提到过，但我在Chrome或Safari中根本找不到这个功能。 Chrome至少有复选框来检查:hover、:visited和:active状态，但:before和:after都看不到。

此外，这篇博客文章（发布于2009年！）提到IE开发工具具有这种功能，但我目前使用的是Mac OS，所以这对我没有帮助。此外，IE不是我的主要目标浏览器。

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

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

- majackson

---

使用Firebug，您可以检查这些伪元素的样式。 - Fabrizio Calderan

请查看此答案以测试Chrome和Firefox中的伪元素：https://dev59.com/KGkv5IYBdhLWcg3wbgUx#20716179 - Subodh Ghulaxe

@majackson Firefox 开发者工具显示前后样式。 - NoBugs

@SubodhGhulaxe，你完全错了，悬停状态与伪元素没有任何关系！ - aditsu quit because SE is EVIL

https://dev59.com/Vc_us4cB2Jgan1znHwh9#31777685 - Michael Benjamin

Answer 1

在Chrome的Dev工具中，伪元素的样式可在面板中看到：

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

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

• window.getComputedStyle
• document.querySelector

- Rob W

---

你是在查看哪个元素才能在面板中看到这个？另外，你使用的Chrome版本是多少？ - majackson

@majackson Chrome 18.0 Ubuntu 11.10。 检查此演示中的 x：http://jsfiddle.net/2M6JA/。 - Rob W

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

似乎在某些情况下无法检查伪样式。请查看@Rob W的fiddle分支：http://jsfiddle.net/RQsY6/ => a标签上的伪元素无法被检查。 - Fabien Quatravaux

@FabienQuatravaux 至少在Chrome 23中，我看到带有content: 'x';的div::before - 截图：http://i.stack.imgur.com/nQ2TZ.png。编辑：我们的fiddles完全没有区别。您是否想用`a`替换`div`？不过，伪元素仍然可以被检查：http://jsfiddle.net/RQsY6/1/（只需在DOM树中选择锚标签）。 - Rob W

抱歉@Rob W，我可能忘记更新了。这是新的链接：http://jsfiddle.net/RQsY6/2/。我认为当CSS规则过于复杂时，它就无法工作（例如：section p.test1.test2 a:before）。当我简化规则（删除一个类）时，我可以检查伪元素。 - Fabien Quatravaux

Answer 2

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

您可以像选择普通元素一样选择它们，但如果删除 content 样式，则伪元素也将被删除，并且开发工具的焦点将转移到其父元素。

看起来继承的 CSS 样式是不可见的，您无法从元素面板编辑 CSS 内容。

- A.M.K

---

如果您在开发工具设置下的元素中打开“显示用户代理影子DOM”，则此功能已在较新版本的Chrome中扩展。 您甚至可以在各种专业的input标签内部看到伪元素，这真的很有帮助。 感谢这个（巨大的）页面提供的提示！ - Coderer

Answer 3

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

这不会显示出来：

:after {
  background-color: red;
}

这将显示在检查器中：

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

希望这能帮到你。

- pop

Answer 4

至少从Chrome 62开始，在DevTools中有一个设置可以显示“Show user agent shadow DOM”，其中显示了额外的伪元素，如输入占位符，在DOM树中不会显示。

更多信息：https://dev59.com/3V8d5IYBdhLWcg3waxkp#26853319

- jgangso

---

你为我打开了一个全新的世界：伪元素现在可以显示在元素的 #shadow-root 中的 <div pseudo="..."> 标签中。在 Edge 中，设置在 首选项 > 元素 > 显示用户代理 Shadow DOM 中。 - CPHPython

Answer 5

在经历了很多挫折后，我发现火狐根本不在文档树中显示伪元素，但是如果选择确切的已定义伪元素的元素，那么伪元素的样式将会显示在右侧的样式规则部分。这对于Firebug和内置检查器（“Q”）都是正确的，我震惊的是之前没有人清楚地解释过这一点。

显然，Chrome / Chromium对伪元素的处理要好得多，因为它们可以像常规元素一样被选择（在文档树和页面上直接），并且与其“所有者”无关，具有布局，属性和其他所有内容。

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

- aditsu quit because SE is EVIL

Answer 6

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

- Stupid_designer

Answer 7

火狐浏览器已经有这个功能了，只需右键点击，“检查元素”，并在检查器的右侧面板中查看前后元素。

- NoBugs

---

我在“原生”的检查工具中看不到:after和:before伪元素 - 切换伪元素只会给我hover，active和focus。但是我可以在Firebug中看到它们。 - sameers

@sameers你是在谈论右键菜单上的开关吗？因为:before和:after不是你在那里切换的东西，它们应该始终在CSS检查器中显示。 - NoBugs