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

APIを使わず、GoogleMapを白黒でサイトに埋め込む方法

更新日:2022.06.08
2026
HTMLCSS

position: sticky;で要素が追従しない時の原因・対処方法

2022.10.06
1466
HTMLCSS

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
3803
HTMLCSS プログラミング

【簡単CSS】横スクロールできない問題を解決する方法

2022.03.16
6556