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

Question

当我检查元素时，Chrome会在匹配的CSS规则窗格中向我显示::after和::before定义（以及继承的定义等..）。但 Computed Styles 窗格仅显示根元素的计算样式。

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

如果有人能说清楚这一点，那将会非常有帮助。

编辑 - 2014年2月13日

Chrome的最新版本确实内置了此功能也许这个小线程与它们有关，包括它？ ： - ）

Answer 1

window.getComputedStyle( element[, pseudoElt] )

  

pseudoElt可选

     

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

我可能误解了你想要完成的事情，但这里有一些JavaScript可以玩。我希望它有用。

它遍历文档中的每个元素，并尝试获取其content和:before的{​​{1}}。
如果找到，则将详细信息输出到:after 简单，但可以证明。

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";
}

Answer 2

是的，虽然不是那么明显。如果您使用的是Firebug，则需要确保在样式下拉选项卡上选择“仅显示应用的样式”。然后，您可以从下面的屏幕截图中看到，您应该能够选择伪元素并查看其计算的样式（或应用的样式），其中考虑了任何覆盖等。