疑似要素（Pseudo-elements）は、HTMLの要素に対して疑似的な内容や装飾を追加するためのCSSの機能です。
特に ::before や ::after がよく使われ、要素の前後にコンテンツを追加できます。
::before と ::after の基本
・要素の前（::before）または後（::after）に内容を追加できる。
contentプロパティ
・content に指定できる値
| 値 | 説明 |
| “テキスト” | 文字を追加 |
| “ ” | 何も追加しない（デフォルト） |
| attr (属性名) | HTML属性の値を取得 |
| url (画像パス) | 背景画像を追加 |
例：HTMLの data-text 属性を取得
::before / ::after の応用例
・ボタンに矢印をつける
・見出しに装飾をつける
・ ::before を使って枠線を作る
黒い枠の外側に赤い枠を作れる！
・::after を使って背景を作る
ボックスの後ろに半透明の黒い背景を追加できる！
疑似要素の注意点
インライン要素には ::before / ::after は適用されにくい
→ display: block; や inline-block; を追加すると適用しやすくなる。
疑似要素の中にはHTMLを入れられない。
→どうしてもHTMLを入れたい場合はJavaScriptを使う。
まとめ
| 疑似要素 | 役割 |
| ::before | 要素の前にコンテンツを追加 |
| ::after | 要素の後にコンテンツを追加 |
| content | テキストや画像を追加できる |
| positionを併用 | 装飾や背景を作れる |
疑似要素を使うと、HTMLを変えずにデザインを強化できるので、ぜひ活用してみてください^^！
コメント