【CSS】data属性の値を擬似要素のcontentプロパティで取得する方法

data属性の値をbefore・after擬似要素のcontentプロパティで取得したい。

本記事ではこのような悩みを解決します。

HTMLを準備

<p data-text="タイトル">内容内容内容</p>

まず最初にHTMLで任意のタグにdata属性を付与します。

本記事では例としてdata-text属性をpタグに付与してます。

p:before {
  content: attr(data-text)"";
}

data属性値を擬似要素のcontentプロパティで取得するコード例です。

contentプロパティの値にattr関数を入れます。

attr関数は要素の属性を受け取れる関数です。

attr関数の引数にデータ属性名を指定。

関数のあとにダブルクォーテーション(“”)を二つ入れ、セミコロン（:）で閉じます。

以上で実装完了です。

CSSでdata属性の値を擬似要素のcontentプロパティで取得する方法について紹介しました。

以上で解説を終わります。