如何检查和调整之前和之后：在浏览器中的伪元素？

我用一个伪元素创build了一些相当复杂的DOM元素，我希望能够在Chrome Inspector或Firebug或同等版本中检查和调整它们。

尽pipe在这个WebKit / Safari博客文章（2010年）中提到了这个function，但是在Chrome或Safari中都找不到这个function。 Chrome浏览器至less有checkbox来检查：hover，：访问和：主动状态，但：之前和之后无处可见。

另外，这个博客文章（date为2009年！）提到了IE开发工具中存在的这个function，但是我目前使用的是Mac OS，所以这对我没有任何帮助。另外，IE不是我主要针对的浏览器。

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

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

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

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

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

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

您可以像select普通元素那样select它们，但是如果删除content样式，则伪元素也将被删除，devtools焦点将更改为其父项。

看起来，inheritance的CSS样式是不可见的，你不能从元素面板编辑CSS内容。

Chrome浏览器不会在DOM树中的伪元素之前和之后显示，如果他们错过了“content”属性。应该设置，即使它设置为无。

这不会显示出来：

 :after { background-color: red; }

这将在检查员中显示：

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

希望能帮助到你。

经过大量的挫折之后，我发现firefox并没有在文档树中显示伪元素，但是如果你select了具有伪元素的精确元素，那么伪元素的样式）显示在右侧的样式规则部分。对于萤火虫和内置检查（“Q”）都是如此，我很震惊没有人打算解释清楚。

显然，铬/铬的处理伪元素是非常优越的，因为他们可以select（无论是在文档树和直接在页面上），像普通元素，布局，属性和其他一切，独立于“所有者”。

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

Firefox现在已经有了这个function，只需点击右键，“检查元素”，并在检查器的右侧面板中查看前后的元素。