检查 CSS :before 网页检查器中的元素

Posted 2023-03-06

【中文标题】检查 CSS :before 网页检查器中的元素

【英文标题】：Inspect CSS :before elements in the web inspector

【发布时间】：2013-08-24 04:32:58

【问题描述】：

有什么方法可以检查通过 CSS :before 选择器添加的元素，在 Chrome 或 FF 网络检查器中检查它们的计算样式（并即时操作它们）？

设置是

li:before 
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;

所以它是没有任何 html 的真正块元素，但经过检查，他只选择了相关的 LI 元素。 “力元素状态”-选项也不起作用，它仅适用于交互状态，如 :hover 而不是 :before

【问题讨论】：

How can I inspect and tweak :before and :after pseudoclasses in-browser? 的可能重复项

【参考方案1】：

是的，有。检查元素本身（不是伪元素），伪元素的样式应该显示在下面，在继承的样式之前。

【讨论】：

好吧，这就是 CSS 操作，但我想获得“计算样式”的完整列表是不可能的？

@user1446186：我相信这是不可能的。

【参考方案2】：

伪元素现在显示在 Chrome Inspector 中（从 Chrome 31 开始）。查看 Chrome 内置检查器中的伪元素。您还可以按预期编辑 css 属性。

【讨论】：

有没有办法从网络检查器中删除 :before 或 :after ？只是好奇。 :)