是否有可能检查:: after和:: before伪元素的"计算"样式？

Question

当我检查元素时,Chrome会在" 匹配的CSS规则"窗格中显示::after和::before定义(以及继承的定义等..).但" 计算样式"窗格仅显示根元素的计算样式.

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

如果有人能说清楚这一点,那将是非常有帮助的.

编辑 - 2014年2月13日

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

Answer 1

window.getComputedStyle( element[, pseudoElt] )

pseudoElt选修的

指定要匹配的伪元素的字符串。对于常规元素，必须省略（或为 null）。伪类可以像“:focus”一样指定。

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

它遍历文档中的每个元素并尝试获取content其:befores 和:afters 的 。
如果找到任何内容，它将详细信息输出到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>