【CSS】attr()関数で属性値を取得・表示する | Designmemo（デザインメモ）-初心者向けWebデザインTips-

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」と表示されるようになります。単に属性値だけ取得するなら、二重引用符は必要ありませんが、例のようにコロンなど文字列も一緒に出力させる場合は二重引用符で囲まないとうまく取得できません。 カスタムデータを利用する