CSS 如何检查和调整 :before 和 :after 浏览器中的伪元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10174719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I inspect and tweak :before and :after pseudo-elements in-browser?
提问by maHymanson
I have created some fairly elaborate DOM elements with an :after pseudo-element, and I'd like to be able to inspect and tweak them in either Chrome Inspector or Firebug or equivalent.
我创建了一些带有 :after 伪元素的相当复杂的 DOM 元素，我希望能够在 Chrome Inspector 或 Firebug 或等效工具中检查和调整它们。
Despite this feature being mentioned in this WebKit/Safari blog post(dated 2010), I can't find this feature at all in either Chrome or Safari. Chrome does at least have checkboxes to inspect :hover, :visited and :active states, but :before and :after are nowhere to be seen.
尽管在这篇 WebKit/Safari 博客文章（日期为 2010 年）中提到了此功能，但我在 Chrome 或 Safari 中根本找不到此功能。Chrome 至少有检查 :hover、:visited 和 :active 状态的复选框，但是 :before 和 :after 无处可见。
Additionally, this blog post(dated 2009!) mentions this capability exists in the IE dev tools, but I'm currently using Mac OS, so this is no help to me. Additionally, IE is not a browser I'm primarily targeting.
此外，这篇博客文章（日期为 2009 年！）提到 IE 开发工具中存在此功能，但我目前使用的是 Mac OS，所以这对我没有帮助。此外，IE 不是我主要针对的浏览器。
Is there any way of inspecting these pseudo-elements?
有没有办法检查这些伪元素？
EDIT: In addition to being wrong about Firebug being unable to inspect these elements, I've found Opera to be pretty good at Inspecting :before and :after elements out of the box.
编辑：除了关于 Firebug 无法检查这些元素的错误之外，我发现 Opera 非常擅长检查 :before 和 :after 元素。
采纳答案by Rob W
In Chrome's Dev tools, the styles of a pseudo-element are visible in the panel:
在Chrome 的开发工具中，伪元素的样式在面板中可见：
Otherwise, you can also input the following line in the JavaScript console, and inspect the returned CSSStyleDeclarationobject:
否则，您也可以在 JavaScript 控制台中输入以下行，并检查返回的CSSStyleDeclaration对象：
getComputedStyle(document.querySelector('html > body'), ':before');
回答by A.M.K
As of Chrome 31 pseudo elements show in the elements panel as child elements of their parent as shown in the following image:
从 Chrome 31 开始，伪元素在元素面板中显示为其父元素的子元素，如下图所示：
You can select them as you would a normal element but if you remove the contentstyle then the pseudo element will also be removed and the devtools focus will change to it's parent.
您可以像选择普通元素一样选择它们，但是如果删除content样式，那么伪元素也将被删除，并且 devtools 焦点将更改为其父元素。
It appears that inherited CSS styles are notviewable and you can't edit CSS content from the elements panel.
似乎无法查看继承的 CSS 样式，并且您无法从元素面板编辑 CSS 内容。
回答by pop
Chrome won't show :before and :after pseudo elements in the DOM-tree, if they miss "content" attribute. It should be set, even if it is set to nothing.
Chrome 不会在 DOM 树中显示 :before 和 :after 伪元素，如果它们缺少“内容”属性。它应该被设置，即使它被设置为空。
This won't show up:
这不会出现：
:after {
background-color: red;
}
This will show up in the inspector:
这将显示在检查器中：
:after {
content: "";
background-color: red;
}
Hope it helps.
希望能帮助到你。
回答by aditsu quit because SE is EVIL
After a lot of frustration, I figured out that firefox doesn't show the pseudo elements in the document tree at all, but if you select the exactelement which has pseudo element(s) defined, then the styles for its pseudo element(s) are shown in the style rules section on the right side. This is true for both firebug and the built-in inspect ("Q"), and I am shocked that nobody bothered to explain this clearly before.
在经历了很多挫折之后，我发现 firefox 根本不显示文档树中的伪元素，但是如果您选择定义了伪元素的确切元素，则其伪元素的样式) 显示在右侧的样式规则部分。这对于萤火虫和内置检查（“Q”）都是正确的，我很震惊之前没有人费心解释清楚这一点。
Clearly, chrome/chromium's handling of pseudo elements is vastly superior, as they can be selected (both in the document tree and directly on the page) and inspected just like regular elements, with layout, properties and everything else, independent of their "owner".
显然，chrome/chromium 对伪元素的处理非常优越，因为它们可以像常规元素一样被选择（在文档树中和直接在页面上）和检查，具有布局、属性和其他一切，独立于它们的“所有者” ”。
Browser versions I'm using currently: Chromium 40.0.2214.91, Firefox 31.3.0.
我目前使用的浏览器版本：Chromium 40.0.2214.91、Firefox 31.3.0。
回答by NoBugs
Firefox has had this feature for awhile now, just right click, "inspect element", and see the before and after elements in the right panel of the inspector.
Firefox 已经有这个功能一段时间了，只需右键单击，“检查元素”，然后在检查器的右侧面板中查看前后元素。
回答by vasu
Select Element--> select hover checked ---> you can see ::before and after elements
选择元素--> 选择悬停选中 ---> 你可以看到 ::before 和 after 元素
