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

CSS ＞ 擬似

概要

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

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

　閲覧数:806　投稿日: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/3/03 3:57 更新
週間人気ページランキング ／ 2-23 → 3-1
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 28
2 RGBの種類 ／ ビットカラー | RGB(色) 5
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
3 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
4 RGB ⇔ Lab | 色変換(色) 3
4 色モデルイメージ図 | 色変換(色) 3
4 「bgcolor」「background-color」「background」の違い | CSS 3
4 画像縦横比の問題 | 画像 3
4 HSV ／ HSB 3
4 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
4 「Google Chrome」のリリースノート（更新履歴）は公開されている | Google Chrome(ブラウザ) 3
5 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 2
5 アイコン | 3系(Bootstrap) 2
5 「属性」「プロパティ」「アトリビュート」の違い | CSS 2
5 8ビットカラー ／ インデックスカラー ／ パレットカラー 2
5 表示されている画像が、キャッシュから取得されているか、確認する方法 | Google Chrome(ブラウザ) 2
5 効果を打ち消すスタイルシート | CSS 2
5 Font Awesome 4.7.0 | Font Awesome(フォント) 2
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 2
5 自由変形ツール | Illustrator CS3(Illustrator) 2
2026/3/2 5:05 更新