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

CSS ＞ 擬似

概要

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

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

　閲覧数:645　投稿日: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
2025/2/19 7:11 更新
週間人気ページランキング ／ 2-12 → 2-18
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 11
2 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 9
3 鉄道会社毎のカラーコード | カラーコード(色) 7
3 RGB ⇔ Lab | 色変換(色) 7
4 「bgcolor」「background-color」「background」の違い | CSS 5
4 16進数カラーコード ／ 2進数 5
5 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 4
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 Design 0 4
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 4
6 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
6 黒体 ／ 色温度 ／ D65（6500K）／ D50（5000K）／ K | 色 3
7 ログイン 2
7 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 2
7 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
7 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 2
7 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
7 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 2
7 24ビットカラーにおけるHLS要素範囲 ／ 最小値 ～ 最大値 2
2025/2/19 1:01 更新