CSSのafter疑似要素やbefore疑似要素で使用するcontentプロパティとattr()関数を組み合わせて、HTMLで用いられる属性の値を取得する方法を紹介します。

属性値の取得方法

HTMLで使用される属性は、href属性やtitle属性など色々ありますが、例えばhref属性の値を取り出したいといった場合は以下のようにします。

.link a::after {
  content: "："attr(href)"";
}

<p class="link"><a href="example.com">URL</a></p>

このようにした場合、画面上には「URL：example.com」と表示されるようになります。単に属性値だけ取得するなら、二重引用符は必要ありませんが、例のようにコロンなど文字列も一緒に出力させる場合は二重引用符で囲まないとうまく取得できません。

カスタムデータを利用する

カスタムデータを使って値を取得することもできます。カスタムデータ属性とは、「data-●●●」という形式で任意のdata属性を作成して割り振ることができるものです。

.new-info li::before {
  content: attr(data-new-date);
}

<ul class="new-info">
  <li data-new-date="20xx-08-08">●●●●●</li>
  <li data-new-date="20xx-07-01">▲▲▲▲▲</li>
  <li data-new-date="20xx-06-12">■■■■■</li>
</ul>

例えば、「data-new-date」というカスタムデータを作成してli要素に割り当てます。それをbefore疑似要素で取得すると以下のように表示されます。

20xx-08-08  ●●●●●
20xx-07-01  ▲▲▲▲▲
20xx-06-12  ■■■■■

わざわざattr()を使って取得・表示しなくても、直接HTML内にテキストで記述すれば済むことではないかということもありますが、これも1つのやり方として覚えておくと良いでしょう。

以上が、attr()関数を使って属性値を取得・表示する方法となります。

おすすめの記事