CSS

The CSS attr() function enables the use of HTML element attribute values within stylesheets.

attr() [function]

　CSSの attr()関数は、要素の属性値を CSSプロパティの値として使用することを可能にするものです。これにより、HTML内で指定した属性を CSSで直接参照し、動的なスタイルを適用することができます。例えば、要素に設定されたデータ属性やタイトル、リンク先の URLなどをスタイルに反映させたい場合に便利です。

リンクのURLを表示

　以下の例では、<a>タグ（リンク）のhref属性（リンク先のURL）をページ上に表示します。これは、リンクにカーソルを合わせたときにそのリンクがどこへ導くのかをユーザーに知らせるのに役立ちます。

詳細はこちらをご覧ください。

HTML

<p>詳細は<a href="https://www.yugien.xyz/">こちら</a>をご覧ください。</p>

CSS

a::after {
	content: " (" attr(href) ")";
	font-size: 0.8em;
}

　このコードでは、リンク（<a>タグ）の後にその href属性の値が小さなフォントで表示されます。リンクにカーソルを合わせなくても、リンクの目的地がテキストとして表示されるため、視覚的に確認することが可能です。