html - Web インスペクターで CSS :before 要素を検査する

Question

CSS :before セレクターを介して追加された要素を Chrome または FF Web インスペクターで検査し、計算されたスタイルを検査する (そしてその場で操作する) 方法はありますか?

セットアップは

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

したがって、これは実際には HTML のないブロック要素ですが、調べてみると、関連する LI 要素のみが選択されます。「要素の状態を強制する」オプションも機能しません。これは、:hover などの相互作用状態に対してのみ有効で、:before に対しては有効ではありません

Answer 1

疑似要素が Chrome インスペクターに表示されるようになりました (Chrome 31 以降)。Chrome の組み込みインスペクターで疑似要素を参照してください。期待どおりに css プロパティを編集することもできます。

Answer 2

はいあります。要素自体 (疑似要素ではない) を調べると、継承されたスタイルの前に、疑似要素のスタイルが下に表示されるはずです。