「:after擬似要素」は、Chromeの「要素を検証」で確認できない

CSS ＞ 擬似

概要

　状態:- 　閲覧数:6,451 　投稿日:2013-06-16 　更新日:2015-09-16
・以前、Chrome「要素を検証」と「ページのソースを表示」の違いについて書いたけど、若干勘違いしていたことに気がつく
・「要素を検証」では、現在表示している全てのCSS内容が確認できるものだとばかり考えていたけれども、必ずしもそう言うわけではない

「確認できる例」と「確認できない例」の違い

　閲覧数:839　投稿日:2013-06-16　更新日:2015-09-16

確認できる例


hogeクラスで確認
.hoge, .hoge:after {

	box-shadow: inset 0px -10px 0px 0px #333333;


確認できない例


.hoge:after {

	box-shadow: inset 0px -10px 0px 0px #333333;


結論


・「:after擬似要素」だけを指定している場合は、Chromeの「要素を検証」で確認できない
・これ知らないと、ハマる可能性があるのではないだろうか？
・「要素を検証」で他人が作成したサイトの値を変更していく際、アレ？　思った通り動作しないよ、みたいなことがあるかも
→Chromeの「要素を検証」はあるまで補助的に利用するのが望ましく、最終的には生CSSを確認していく必要があるのだと思われ

「a:before:hover」ではなく「a:hover:before」

擬似クラス（Pseudo-classes）



類似度ページランキング
順位 ページタイトル抜粋 ％
1 「:after擬似要素」は、Chromeの「要素を検証」で確認できない 80
2 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 41
3 ChromeでCSSを確認する4つの方法 40
4 「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない 38
5 「Twitter Bootstrap」2系のアイコンは、画像なので大きく出来ない 37
6 Chromeでmhtml保存を選択できなくなったので、拡張機能「Save Page State」を導入 37
7 Chrome でキャッシュを効かさない 37
8 「直後が A 要素 でない B 要素」を指定するCSSセレクタは、「A:not(:has(+ B)) {}」 36
9 Chrome ブラウザで画像の DataURI を取得 35
10 異なる角度の「transform:rotate」を連続実施するためには、@keyframes を利用 35
11 Chromeが重くて困っている。解決できない 35
12 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 35
13 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 35
14 Chromeはアホなコ 35
15 Chromeをインストール出来ない 35
16 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 35
17 「PhotoShop CS3」　と、「Vieas」　の違い 34
18 Chromeだけが日本語入力できない。秀丸は日本語入力できる 34
19 「a:before:hover」ではなく「a:hover:before」 34
20 Chrome コンソール画面で CSSの:hover 適用スタイルを確認 34
2026/6/29 7:46 更新
週間人気ページランキング ／ 6-22 → 6-28
順位 ページタイトル抜粋 アクセス数
1 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 9
2 「属性」「プロパティ」「アトリビュート」の違い | CSS 8
3 スキップリンク | アクセシビリティ(UI) 6
4 Design 0 5
4 #2196F3の互換性 | 色変換(色) 5
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 4
5 お使いのコンピュータ ネットワークから通常と異なるトラフィックが検出されました | Google Chrome(ブラウザ) 4
5 「bgcolor」「background-color」「background」の違い | CSS 4
6 RGB各成分が最大値となるのは？ 3
6 SeaMonkey 2.7.2 3
6 カラーコード(色) カテゴリー 3
6 コンソールエラー ／ ブラウザ間差異 | ブラウザ 3
6 Illustrator CS3(Illustrator) カテゴリー 3
6 Google マップ カテゴリー 3
6 HTMLエディタ カテゴリー 3
6 ブラウザ カテゴリー 3
6 Illustrator CS2 でファイル名に「更新済み」を追加しない | Illustrator CS2(Illustrator) 3
6 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
6 CSSキーフレームアニメーションで、マウスアウト時に独自のアニメーションを設定することは出来ない | アニメーション 3
6 アイコンを「Font Awesome」から変更。→「自分で探したSVG」を「自分のserver」へアップロード | アイコン(デザイン) 3
2026/6/29 5:05 更新