web-dev-qa-db-ja.com

ブラウザー内で擬似要素の：beforeおよび：afterを調べて微調整するにはどうすればよいですか？

：after疑似要素を使用して、かなり精巧なDOM要素を作成しました。Chrome InspectorまたはFirebugまたは同等のいずれかでそれらを検査および調整できるようにしたいと思います。

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

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

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

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

cssfirefoxgoogle-chromefirebuggoogle-chrome-devtools
81
majackson

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

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

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

次の図に示すように、Chrome= 31の擬似要素は、親の子要素として要素パネルに表示されます。

Screenshot

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

継承されたCSSスタイルはnotで表示可能で、要素パネルからCSSコンテンツを編集できないようです。

29
A.M.K

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

これは表示されません：

:after {
  background-color: red;
}

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

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

それが役に立てば幸い。

20
pop

多くのフラストレーションの後、Firefoxはドキュメントツリーに擬似要素を表示しないことがわかりましたat）ですが、擬似要素を持つexact要素を選択した場合定義済みの場合、その擬似要素のスタイルが右側のスタイルルールセクションに表示されます。これは、firebugと組み込みの検査（「Q」）の両方に当てはまります。これまで誰もこれを明確に説明することに悩まされていなかったことにショックを受けました。

明らかに、クロム/クロムの疑似要素の処理は非常に優れており、（ドキュメントツリー内およびページ上で）選択して、「所有者」とは無関係にレイアウト、プロパティ、その他すべてを備えた通常の要素と同様に検査できます。 「。

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

5
aditsu

Firefoxにはしばらく前からこの機能があり、右クリックして「要素を検査」し、インスペクターの右パネルで要素の前後を確認できます。

1
NoBugs