css - 是否可以检查 "computed"样式的::after 和::before 伪元素？

Question

Chrome 在 Matched CSS Rules Pane 中向我显示 ::after 和 ::before 定义(以及继承的定义等)当我检查一个元素时。但是 Computed Styles Pane 仅显示根元素的计算样式。

我有一个完整的伪元素 CSS 类层次结构，其中一些属性被继承，一些属性被覆盖等，我想知道是否有任何方法可以看到实际应用的样式集(即计算样式是什么 Pane 显示根元素)

如果有人能阐明这一点，那将非常有帮助。

编辑 - 2014 年 2 月 13 日

最近版本的 Chrome 确实内置了这个功能也许这个小线程与他们有关，包括它？ :-)

Answer 1

window.getComputedStyle( element[, pseudoElt] )

pseudoElt Optional

A string specifying the pseudo-element to match. Must be omitted (or null) for regular elements. Pseudo-classes can be specified like ":focus".

我可能误解了您要完成的任务，但这里有一些 JavaScript 可供使用。我希望它有用。

它遍历文档中的每个元素并尝试获取其 :before 和 :after 的 content。
如果找到任何内容，它会将详细信息输出到 console。
简单但可证明。

document.querySelectorAll( "*" ).forEach( ( e ) => {
  const ebc = window.getComputedStyle( e, ":before" ).content,
        eac = window.getComputedStyle( e, ":after" ).content;
  if ( ebc || eac ) {
    console.log( e );
    console.log( ( ebc ? "Before content = " + ebc : "No :before content" ) );
    console.log( ( eac ? "After content = " + eac : "No :after content" ) );
  }
} );

div:before {
  content: "This is a test.";
}
p:after {
  content: attr( data-content );
}
span:after {
  content: " dolor";
}

<div>
  <p data-content="&hellip;">Lorem <span>ipsum</span></p>
</div>