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

CSS ＞ 擬似

概要

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

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

　閲覧数:849　投稿日: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/8/24 9:03 更新
週間人気ページランキング ／ 8-17 → 8-23
順位 ページタイトル抜粋 アクセス数
1 Design 0 6
2 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 4
3 Chromeで(TikTokなど)特定Webサイトの音を消すには、該当タブを右クリック後、「サイトをミュート」をクリックします。 | Google Chrome(ブラウザ) 3
3 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく | CSSトラブル対応(CSS) 3
3 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
3 RGBの種類 ／ ビットカラー | RGB(色) 3
3 RGB → HSL ／ RGB → HSV | 色変換(色) 3
4 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 2
4 絶対パス | HTML 2
4 コンソールエラー ／ ブラウザ間差異 | ブラウザ 2
4 「Twitter Bootstrap」導入したらおかしくなった時、試した方がよいかもしれないこと | 2系(Bootstrap) 2
4 HSLとHSVの違い | 色変換(色) 2
4 RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB 2
4 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 2
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
4 Adobe Camera Raw 4.0 | Photoshop 2
4 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 2
4 色変換(色) カテゴリー 2
5 GIMP | GIMP 系(ソフトウェア) 1
5 PNG画像透明化問題 | 画像 1
2026/8/24 5:05 更新