【CSS】::beforeや::afterをつけたときに、content: '';と書く必要があるのは何故なの？🤔
`::before`や`::after`疑似要素を使用する際に`content: '';`を指定する必要があるのは、これらの疑似要素がコンテンツを必要とするためです。`content`プロパティは、`::before`や`::after`疑似要素によって生成されたコンテンツの内容を指定します。たとえ可視的なコンテンツを追加しない場合でも、このプロパティは必須です。
`content: '';`を指定することにより、実際には空のコンテンツを生成しますが、この空のコンテンツを利用して、装飾的な要素（例えば、背景、ボーダー、サイズ指定など）をページに追加することができます。これは、HTMLマークアップに手を加えずに、CSSのみでビジュアルデザインを強化する一般的な手法です。
例えば、リストの項目の前に装飾的な記号を付けたい場合や、要素の周りに追加的な枠を描画したい場合などに、`::before`や`::after`疑似要素が利用されます。`content`プロパティに何らかの値を設定しなければ、疑似要素は画面上に表示されないため、たとえ空でも`content`プロパティの指定が必要になります。
俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！ ご興味あれば、よろしくお願いいたしますッ！！
それでは、最後まで読んでいただき、ありがとうございましたッ！！
よろしくお願いしますッ！