:: afterと:: before pseudo要素の "計算された"スタイルを調べることは可能ですか？

Question

要素を検査すると、ChromeはのMatched CSS Rulesペインに::afterと::beforeの定義（継承された定義など）を表示します。しかし、Computed Stylesペインには、ルート要素の計算されたスタイルのみが表示されます。

いくつかのプロパティが継承され、いくつかのオーバーライドされたものなど、疑似要素のCSSクラス全体が階層化されていて、実際に適用されたスタイルのセットを見る方法があるかどうかを知りたい

誰もがこれにどのような光を当てることができれば、それは非常に役立つでしょう。

編集 - クロームの2014年2月13日

最近のバージョンでは、実際にこの機能が内蔵されていますおそらく、この小さなスレッドが、それを含め彼らとは何かを持っていました？ :-)

Answer 1

はい、それはそれほど明白ではありませんが、そうです。 Firebugを使用している場合、スタイルドロップダウンタブで「適用されたスタイルのみを表示」が選択されていることを確認する必要があります。あなたは、以下のスクリーンショットからわかるように、その後、次の擬似要素を選択することができると

Answer 2

window.getComputedStyle(element[, pseudoElt])等その計算されたスタイリング（または適用されるスタイリング）考慮し、任意の上書きを表示すべきですオプション

pseudoElt

一致する擬似要素を指定する文字列。通常の要素に対しては、省略（またはヌル）する必要があります。擬似クラスは "：focus"のように指定できます。

あなたが達成しようとしていることを誤解している可能性がありますが、ここではいくつかのJavaScriptを使用して遊んでいます。私はそれが役に立つことを願っています。

文書内のすべての要素を反復し、:beforeと:afterのcontentを取得しようとします。
見つかった場合は、詳細をconsoleに出力します。
シンプルだが実証可能。ただ、その答えは、おそらく何ですが、あなたがChromeを使用していない実現

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>