【CSS Modules】contentプロパティの使い方
contentプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
contentプロパティは、CSSの::beforeや::afterといった特別な要素（疑似要素と呼ばれます）と組み合わせて、要素の前面または後面に生成されるコンテンツを保持するプロパティです。このプロパティを使用することで、HTMLのマークアップを直接変更することなく、さまざまな種類のコンテンツをWebページに表示させることができます。
具体的には、テキスト文字列、画像（url()関数を使用して指定）、Webページ内の特定の要素の属性値（attr()関数を使用）、または自動で増減するカウンター値などを挿入することが可能です。例えば、引用符を自動で追加したり、アイコンフォントや絵文字を表示したり、リストの連番をカスタマイズしたりする際に非常に役立ちます。
contentプロパティによって挿入されたコンテンツは、HTML文書の構造の一部ではなく、CSSによって視覚的に表示されるものです。そのため、HTMLの構造をよりシンプルに保ちながら、視覚的な装飾や補足情報を追加したい場合に有効な手段となります。しかし、スクリーンリーダーなどの補助技術には認識されない場合があるため、アクセシビリティを考慮し、コンテンツが持つ意味が重要な情報である場合にはHTML内に直接記述することが推奨されます。あくまで装飾や、視覚的な補助としての利用が主な目的です。
公式リファレンス: content
構文(syntax)
1.element::before { 2 content: "挿入テキスト"; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません