您如何在浏览器开发人员工具中查看/调试 :before 和 :after ？

【问题标题】：How do you view/debug :before and :after in a browser developer tools?您如何在浏览器开发人员工具中查看/调试 :before 和 :after ？
【发布时间】：2016-04-12 15:44:17
【问题描述】：

我正在尝试在开发者工具中查看/编辑 :after 元素的样式。

如何找到与::before 和::after 伪元素关联的规则？

【问题讨论】：

标签： css browser pseudo-element developer-tools

【解决方案1】：

找到了。您选择具有 :after 的元素，并且 :after 样式将与该元素的其他样式一起列出。

【讨论】：

【解决方案2】：

在 Chromium 浏览器（例如 Chrome、Brave 和 Edge）中，打开元素的折叠内容并点击自动添加的 ::after 元素：

Firefox 虽然在您直接单击原始元素后在右侧窗格中有一个独立的 Pseudo-elements 部分：

IE11当你点击::after规则和其他元素规则时简单地列出它：

【讨论】：