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

data属性の値をbefore・after擬似要素のcontentプロパティで取得したい。
本記事ではこのような悩みを解決します。
HTMLを準備
<p data-text="タイトル">内容内容内容</p>
まず最初にHTMLで任意のタグにdata属性を付与します。
本記事では例としてdata-text属性をpタグに付与してます。
data属性値を擬似要素のcontentプロパティで取得
p:before {
content: attr(data-text)"";
}
data属性値を擬似要素のcontentプロパティで取得するコード例です。
contentプロパティの値にattr関数を入れます。
attr関数は要素の属性を受け取れる関数です。
attr関数の引数にデータ属性名を指定。
関数のあとにダブルクォーテーション(“”)を二つ入れ、セミコロン(:)で閉じます。
以上で実装完了です。
まとめ
CSSでdata属性の値を擬似要素のcontentプロパティで取得する方法について紹介しました。
以上で解説を終わります。
目次