CSS疑似要素（::before・::after）の使い方完全ガイド｜content・装飾・応用例まとめ2025
CSSの「疑似要素（Pseudo-elements）」は、HTMLを直接変更せずに装飾や追加コンテンツを実現できる便利な機能です。特に ::before と ::after は、テキストや背景、枠線などを自由に追加できるため、デザインの幅を大きく広げてくれます。
本記事では、疑似要素の基本から content プロパティの使い方、実用的なデザイン例、注意点まで初心者にもわかりやすく解説します。
::before と ::after の基本
・要素の前（::before）または後（::after）に内容を追加できる。
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
contentプロパティ
・content に指定できる値
| 値 | 説明 |
| “テキスト” | 文字を追加 |
| “ ” | 何も追加しない（デフォルト） |
| attr (属性名) | HTML属性の値を取得 |
| url (画像パス) | 背景画像を追加 |
例：HTMLの data-text 属性を取得
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
::before / ::after の応用例
・ボタンに矢印をつける
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
・見出しに装飾をつける
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
・ ::before を使って枠線を作る
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
黒い枠の外側に赤い枠を作れる！
・::after を使って背景を作る
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
ボックスの後ろに半透明の黒い背景を追加できる！
疑似要素の注意点
インライン要素には ::before / ::after は適用されにくい
→ display: block; や inline-block; を追加すると適用しやすくなる。
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
疑似要素の中にはHTMLを入れられない。
→どうしてもHTMLを入れたい場合はJavaScriptを使う。
Summary
| 疑似要素 | 役割 |
| ::before | 要素の前にコンテンツを追加 |
| ::after | 要素の後にコンテンツを追加 |
| content | テキストや画像を追加できる |
| positionを併用 | 装飾や背景を作れる |
疑似要素を使うと、HTMLを変えずにデザインを強化できるので、ぜひ活用してみてください^^！
その他関連記事はこちら→Programming Notes
Comments