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

【问题标题】：How can I inspect and tweak :before and :after pseudo-elements in-browser?如何在浏览器中检查和调整 :before 和 :after 伪元素？
【发布时间】：2012-04-27 19:37:55
【问题描述】：

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

【问题讨论】：

用 firebug 你可以检查那些伪元素的 style。
@F.Calderan 怎么样？如果我修改它们，它会更新页面吗？
是的，我可以通过 Fx11/MacOS 上的 firebug 1.9.1 更改伪元素的属性
啊，是的，我也看到了。抱歉，我把 Firefox 的新的、内置的开发工具（以前没有使用过）误认为是某种具有莫名其妙的更少功能的 Firebug 重新设计。我的立场是正确的；）
检查此答案以测试 chrome 和 firefox 中的伪元素 stackoverflow.com/a/20716179/1868660

标签： css firefox google-chrome firebug google-chrome-devtools

【解决方案1】：

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

【讨论】：

你为我打开了一个全新的世界：伪元素现在出现在元素的#shadow-root 内的<div pseudo="..."> 标签中。设置在 Preferences > Elements > Show user agent shadow DOM in Edge.

【解决方案2】：

Select Element--> select hover checked ---> 你可以看到::before and after elements

【讨论】：

【解决方案3】：

经过一番挫折后，我发现 firefox 根本不会在文档树中显示伪元素，但是如果您选择 exact 元素定义了伪元素，则其伪元素的样式显示在右侧的样式规则部分。 firebug 和内置检查（“Q”）都是如此，我很震惊之前没有人费心解释清楚。

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

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

【讨论】：

【解决方案4】：

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

这不会显示：

:after {
  background-color: red;
}

这将显示在检查器中：

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

希望对你有帮助。

【讨论】：

【解决方案5】：

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

【讨论】：

我在“本机”检查器工具中看不到 :after 和 :before 伪元素 - 切换伪元素只给我 hover、active 和 focus。不过我可以在 Firebug 中看到它们。
@sameers 你说的是右键菜单的切换吗？因为 :before 和 :after 不是你在那里切换的东西，所以它们应该总是出现在 css 检查器中。

【解决方案6】：

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

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

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

【讨论】：

如果您在开发工具设置中的 Elements 下打开“显示用户代理影子 DOM”，这已在较新的 Chrome 中展开。您甚至可以在各种专门的input 标签中看到伪元素，这真的很有帮助。感谢this (huge) page 提供小费！

【解决方案7】：

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

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

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

【讨论】：

我没有看到这个。您正在检查什么元素以便看到它出现在面板中？另外，您使用的是哪个版本的 Chrome？
@majackson Chrome 18.0 Ubuntu 11.10。检查此演示中的x：jsfiddle.net/2M6JA
我在您的演示中看到了伪类，但在我的代码中却没有，这让我怀疑我遇到了另一个不同的问题。无论如何，很明显您是正确的，所以我会将其标记为已解决 - 非常感谢！
它缝合了 :pseudo 样式在某些情况下无法检查。查看@Rob W fiddle 的这个分支：jsfiddle.net/RQsY6 => 无法检查 a 标签上的伪元素。
@FabienQuatravaux 至少在 Chrome 23 中，我看到 div::before 和 content: 'x'; - 截图：i.stack.imgur.com/nQ2TZ.png。编辑：我们的小提琴完全没有区别。是否要将div 替换为a？尽管如此，仍然可以检查伪元素：jsfiddle.net/RQsY6/1（只需选择 DOM 树中的锚标记）。