【CSS Modules】::before疑似要素の使い方
::before疑似要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
::beforeオブジェクトは、指定したHTML要素のコンテンツの先頭に、仮想的なコンテンツを挿入するために使用されるオブジェクトです。これは、実際のHTML構造には存在しない「擬似要素」として振る舞い、CSSのみで視覚的な装飾や情報を追加する際に非常に強力なツールとなります。
主に content プロパティと組み合わせて使用され、挿入したいテキスト、画像（url() 関数を使用）、または特定の記号（カウンタやアイコンフォントなど）を指定します。例えば、リストアイテムの前にアイコンを表示したり、引用文の開始記号を自動で追加したり、連番を生成するといった場面で利用されます。
::beforeによって生成されたコンテンツは、デフォルトではインライン要素として扱われますが、displayプロパティを変更することでブロックレベル要素のように振る舞わせることも可能です。これにより、生成されたコンテンツの配置やレイアウトを細かく制御できます。
この機能は、CSS Modulesの文脈において、HTMLマークアップをシンプルに保ちつつ、プレゼンテーション層であるCSSだけで柔軟なデザインと機能拡張を実現するための重要な要素です。システムエンジニアを目指す初心者の方々にとっても、Webデザインの効率性と表現力を高める上で必須の知識と言えるでしょう。
公式リファレンス: ::before
構文(syntax)
1selector::before { 2 content: "テキスト"; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません