attr() (content only)

概要

content プロパティ内で attr() を使うことで、HTML属性の値を擬似要素として表示できます。リンクのURL表示、ツールチップ、データラベルなど、HTMLの情報をCSSで視覚化する際に便利です。すべての主要ブラウザで長年サポートされている安定した機能です。

対応ブラウザ

基本構文

a[href]::after {
  content: ' (' attr(href) ')';
}
[data-tooltip]::before {
  content: attr(data-tooltip);
}

実務での使いどころ

• 印刷用スタイルでURLを表示

  印刷時にリンクのURLをテキストの後に表示させ、紙面でもリンク先が分かるようにできます。

注意点

アクセシビリティ

• content プロパティで生成されたテキストはスクリーンリーダーに読み上げられることがあります。重要な情報は擬似要素ではなくHTML本体に配置してください。

参考リンク

• MDN Web Docs — attr() (content only)