ブラウザ内の擬似要素のbeforeと：afterの後に、どうやって検査し調整することができますか？

Question

：after擬似要素でかなり精巧なDOM要素をいくつか作成しましたが、Chrome InspectorまたはFirebugまたはそれに相当するもので検査して微調整できるようにしたいと考えています。

この機能はthis WebKit/Safari blog post（2010年）に記載されていますが、ChromeまたはSafariではこの機能が全く見つかりません。 Chromeには、少なくとも、ホバー、：訪問済み、：アクティブな状態のチェックボックスがありますが、beforeと：afterは表示されません。

さらに、this blog post（2009年）は、この機能がIEの開発ツールに存在すると述べていますが、現在Mac OSを使用していますので、これは私にとって役に立ちません。さらに、IEは主にターゲットとしているブラウザではありません。

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

編集：これらの要素を調べることができないFirebugについて間違っていることに加えて、私はOperaがBefore Inspecting：beforeと：after要素からかなり優れていることを発見しました。 Chrome's Dev toolsで

Answer 1

、擬似要素のスタイルは、パネルに表示されている：

そうでなければ、あなたもできるJavaScriptコンソールに入力次の行を、返さCSSStyleDeclaration物体を検査します。

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

• window.getComputedStyle
• document.querySelector

Answer 2

次の図に示すように31個の疑似要素は、その親の子要素として要素パネルに表示クロームの通り：

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

継承されたCSSスタイルはではなく、と表示され、エレメントパネルからCSSコンテンツを編集することはできません。

Answer 3

Firefoxはしばらくの間この機能を持っていました。右クリックして "inspect element"をクリックし、インスペクタの右パネルにあるbeforeとafter要素を確認してください。

Answer 4

DOMツリーのbeforeと：after擬似要素が「content」属性を見つけられない場合、Chromeは表示されません。何も設定されていなくても設定する必要があります。

これは表示されません。

:after { 
    background-color: red; 
} 

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

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

はそれがお役に立てば幸いです。

Answer 5

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

明らかに、クロム/クロムの擬似要素の処理は、文書ツリーとページ上で選択することができ、レイアウト、プロパティ、その他すべての独立した要素と同様に彼らの「所有者」の

ブラウザのバージョン私は現在、Chromium 40.0.2214.91、Firefox 31.3.0を使用しています。