CSSでdata属性を使用してwidthの数値を設定したい。

Question

<span class="ratio" data-ratio="38.7"></span>

.Box.already .label span.ratio {
    left: 0;
    width: attr(data-ratio %, "0%");
    display: inline-block;
    box-sizing: border-box;
    padding: 10px;
}

反映されません。原因はなにになりますでしょうか？

Answer 1

attr() 関数はどの CSS プロパティでも使用することができますが、 content 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。

[attr() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/attr(%29)

Answer 2

残念ながら、attr()で文字列以外の値を回収するのは、現状では規格書上の存在にとどまっていて、ブラウザで実装されていません（MDN）。