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 プログラミング

tableタグのtd、thに入ってる文字がスマホだとサイズがおかしくなる原因【改善】

2021.06.03
5994
HTMLCSS

CSSでテキストにグラデーションをかける方法(便利なジェネレーターも紹介)

2022.07.03
4895
HTMLCSS プログラミング

【html】audioタグでダウンロードをさせない方法。

2021.12.27
6759
HTMLCSS プログラミング

【簡単CSS】flexboxで孫要素の高さを揃えて均等に子要素を横並び配置する方法

2022.03.06
10036