attr()要素から属性値を取得して使用する
attr() 関数は、指定の要素から属性に指定された値を取得し、その値をスタイルシート内で使用できる CSS 関数です。
詳細説明
HTML として下記のような記述があった場合、
<p data-num="10">個</p> <p data-num="24">個</p>
CSS で下記のように attr() 関数を使用することで、
[data-num]::before {
content: attr(data-num) " ";
}
下記のような表示結果を得ることができます。
個
個
attr()のサンプルソース
<p data-num="10">個</p>
<p data-num="24">個</p>
[data-num]::before {
content: attr(data-num) " ";
}
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |