【CSS】::beforeや::afterをつけたときに、content: '';と書く必要があるのは何故なの？🤔

`::before`や`::after`疑似要素を使用する際に`content: '';`を指定する必要があるのは、これらの疑似要素がコンテンツを必要とするためです。`content`プロパティは、`::before`や`::after`疑似要素によって生成されたコンテンツの内容を指定します。たとえ可視的なコンテンツを追加しない場合でも、このプロパティは必須です。

`content: '';`を指定することにより、実際には空のコンテンツを生成しますが、この空のコンテンツを利用して、装飾的な要素（例えば、背景、ボーダー、サイズ指定など）をページに追加することができます。これは、HTMLマークアップに手を加えずに、CSSのみでビジュアルデザインを強化する一般的な手法です。

例えば、リストの項目の前に装飾的な記号を付けたい場合や、要素の周りに追加的な枠を描画したい場合などに、`::before`や`::after`疑似要素が利用されます。`content`プロパティに何らかの値を設定しなければ、疑似要素は画面上に表示されないため、たとえ空でも`content`プロパティの指定が必要になります。

CSS設計完全ガイド ~詳細解説+実践的モジュール集

プロのコーディングが身につくHTML/CSSスキルアップレッスン すぐに活かせてずっと役立つ現場のテクニック

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

　俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！　ご興味あれば、よろしくお願いいたしますッ！！

HTML、CSS、JavaScriptをちょっと学ぶ！: カウントアップできるサイトをつくろう！ (スキマTJ文庫)

HTML、CSS、JavaScriptをちょっと学ぶ！: 背景色を変更できるサイトをつくろう！ (スキマTJ文庫)

　それでは、最後まで読んでいただき、ありがとうございましたッ！！