ブラウザ内の：beforeおよび：after疑似要素をどのように検査および調整できますか？

：after疑似要素を使用してかなり複雑なDOM要素をいくつか作成しました。それらをChrome InspectorまたはFirebugまたは同等のもので検査および調整できるようにしたいと考えています。

この機能については、このWebKit / Safariブログ投稿（2010年日付）で言及されていますが、ChromeとSafariのどちらにもこの機能はありません。Chromeには、少なくとも：hover、：visited、および：activeの状態を検査するチェックボックスがありますが、：beforeおよび：afterは表示されません。

さらに、このブログ投稿（2009年日付）では、この機能がIE開発ツールに存在することについて言及していますが、現在Mac OSを使用しているため、これは役に立ちません。さらに、IEは私が主に対象としているブラウザーではありません。

これらの疑似要素を検査する方法はありますか？

編集：Firebugがこれらの要素を検査できないことについて間違っていることに加えて、Operaはすぐに：beforeおよび：after要素を検査するのにかなり優れていることがわかりました。

でChromeの開発ツール、擬似要素のスタイルは、パネルに表示されます：

それ以外の場合は、JavaScriptコンソールに次の行を入力して、返されたCSSStyleDeclarationオブジェクトを検査することもできます。

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

Chrome 31以降、次の画像に示すように、疑似要素が要素パネルに親の子要素として表示されます。

通常の要素と同じように選択できますが、contentスタイルを削除すると、疑似要素も削除され、devtoolsフォーカスがその親に変わります。

その継承されたCSSスタイルがある表示されていない閲覧可能としますが、要素のパネルから編集CSSの内容をすることはできません。

「コンテンツ」属性がない場合、ChromeはDOMツリー内の：beforeおよび：after疑似要素を表示しません。何も設定されていなくても設定する必要があります。

これは表示されません：

:after {
  background-color: red;
}

これはインスペクターに表示されます：

:after {
  content: "";   
  background-color: red;    
}

それが役に立てば幸い。

欲求不満の多くの後、私はFirefoxは、ドキュメントツリー内の擬似要素を示していないことを考え出しすべてで、しかし、あなたが選択した場合、正確な疑似要素（複数可）に定義を持っている要素を、その疑似要素について、その後のスタイル（S ）は、右側のスタイルルールセクションに表示されます。これは、Firebugと組み込みの検査（ "Q"）の両方に当てはまり、これまで誰もこれを明確に説明することに煩わされたことがないことにショックを受けました。

明らかに、クロム/クロムの疑似要素の処理は、それらが選択され（ドキュメントツリー内とページ上で直接）、通常の要素と同じように、レイアウト、プロパティ、その他すべての「所有者」に関係なく検査できるため、非常に優れています。 」

現在使用しているブラウザのバージョン：Chromium 40.0.2214.91、Firefox 31.3.0。

しばらくの間、Firefoxにこの機能がありました。右クリックして「要素を検査」し、インスペクタの右側のパネルでbefore要素とafter要素を確認してください。

要素の選択->チェックされたホバーを選択---> ::要素の前と後を見ることができます

少なくともChrome 62以降、DevToolsには「ユーザーエージェントシャドウDOMを表示する」設定があり、入力プレースホルダーなどの追加の疑似要素を表示しますが、そうでなければDOMツリーには表示されません。

詳細：https : //stackoverflow.com/a/26853319/3963594