Written by Kasumi

【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プロパティで取得する方法について紹介しました。

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

目次

関連記事

HTMLCSS プログラミング

HTML・CSSのみで開閉アコーディオンを作る【JS不要簡単】

2020.04.12
2852
HTMLCSS

【画像卒業】CSSだけで平行四辺形を作る方法

2022.07.05
2277
HTMLCSS

画像をPCとスマホで切り替える方法【結論:picture要素を使おう】

2022.06.25
791
HTMLCSS

CSSで透過グラデーションを作成する方法

2023.01.20
1243