まず疑うべきはcontentプロパティの抜け
::beforeと::afterは、contentプロパティが指定されていないとそもそも生成されません。値が空でも表示したい場合はcontent:"";のように空文字を明示する必要があります。これが最頻出の原因です。
テキストを入れたいときはcontent:"★";のように文字列を指定します。アイコンフォントや画像を背景で重ねる場合でも、content:"";の宣言自体は必須だと覚えておくと事故が減ります。
displayとサイズ指定で消えるパターン
擬似要素は初期状態でinline相当として扱われます。widthやheightを与えても効かず、結果として何も見えないことがあります。四角い装飾やラインを描くならdisplay:block;やdisplay:inline-block;を指定しましょう。
背景色や枠線だけで装飾している場合、高さや幅がゼロだと面積が生まれず透明なままになります。最低限のサイズを与えているか確認してください。
症状別チェック表
::before・::afterで作った装飾が表示されないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
適用できない要素に書いていないか
img・input・brなどの置換要素や空要素には、::before・::afterが効きません。これらの内側に子コンテンツを持てないためです。装飾したいときは外側をdivやspanで包み、そのラッパーに擬似要素を付けます。
ボタンの見た目が崩れる場合、inputではなくbutton要素を使うか、ラッパーを挟む設計に切り替えると解決することが多いです。
重なり順と位置で隠れているだけのことも
生成はされているのに見えない場合、親要素や兄弟要素の背景に隠れている可能性があります。position:absolute;で配置したつもりが親にposition:relative;がなく、想定外の場所に飛んでいるケースが典型です。
z-indexの前後関係で背面に回り込むこともあります。一時的に目立つ背景色を当てて、どこに描画されているかを可視化すると切り分けが速くなります。
切り分けの手順
原因が複数あり得るので、上から順に潰していくのが確実です。次の順番で確認してください。
- content指定があるか（空でもcontent:"";を書く）
- 対象が置換要素や空要素になっていないか
- display:blockやサイズが必要な装飾で指定されているか
- 一時的に背景色を付けて生成位置を確認する
- position・z-indexで他要素に隠れていないか確認する
実機やレビュー相手と見え方を揃える
手元のブラウザでは出るのに相手の環境では出ない、という擬似要素の不一致もあります。フォントの有無やレンダリングの差が絡むためです。確認用のページを共有して同じ画面を見ながら相談すると、認識のズレを早く埋められます。
ギガサイト便なら、検証用のHTMLをドロップするだけで〇〇.giga-site.com形式の共有URLが発行でき、同じURLのままファイルを差し替えながら直して見せられます。レビュー相手に見せたくない関係者以外には、URLにパスワードや会社ドメイン認証を併用しておくと安心です。
よくある質問
content:"";は空でも本当に必要ですか
はい。contentが宣言されていないと擬似要素自体が生成されないため、テキストを入れない装飾でもcontent:"";の記述は必須です。
imgタグに::beforeが効きません
img・input・brなどの置換要素や空要素には擬似要素を付けられません。divやspanで包み、ラッパー側に::before・::afterを付ける設計に変更してください。
幅と高さを指定したのに四角が出ません
擬似要素は初期状態でinline相当のため、widthやheightが無視されます。display:block;またはdisplay:inline-block;を指定すると面積が確保されます。
生成はされているのに画面に見えないのはなぜですか
親のpositionが無く想定外の位置に出ている、z-indexで背面に回っている、サイズがゼロ、などが考えられます。一時的に背景色を当てて描画位置を可視化すると原因を特定しやすくなります。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。