CSSのデータ属性からコンテンツを取得する方法

HTML要素にデータ属性を追加する: HTML要素にデータ属性を追加するには、属性名と属性値の形式でデータ属性を定義します。例えば、data-contentというデータ属性を使用する場合、HTML要素にdata-content="コンテンツの値"というように記述します。

CSSでデータ属性を参照する: CSSのcontentプロパティを使用して、データ属性の値を取得します。以下は基本的な例です。

.example::before {
 content: attr(data-content);
}

上記のCSSコードでは、.exampleというクラスを持つ要素の前に疑似要素を作成し、その疑似要素のコンテンツにdata-contentの値を表示しています。

コンテンツのスタイリング: 取得したデータ属性のコンテンツをスタイリングすることも可能です。例えば、フォントサイズや色を変更する場合は、以下のようにCSSを追加します。

.example::before {
 content: attr(data-content);
 font-size: 16px;
 color: red;
}

上記のCSSコードでは、取得したデータ属性のコンテンツにフォントサイズ16ピクセルと赤色のスタイルを適用しています。