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 | ○ |