CSSのcontentプロパティ解説：HTML5のprogress要素でattr()が機能しない原因と対処法

HTML5の<progress>要素に対して、CSSのattr()関数を使って動的に値を表示しようとしても、そのままでは期待どおりに動作しません。これを機能させるには、CSS側で静的なコンテンツ（content）を明示的に追加する必要があります。

HTMLの例

まず、以下のようなprogress要素を用意します。

<progress max="100" value="60" data-value="5"></progress>

対応するCSS

次に、HTML5のprogress要素の前後にCSSで生成したコンテンツを追加するため、以下のスタイルを記述します。

progress::-webkit-progress-bar:before,
progress::-webkit-progress-bar:after {
    content: '989';
}

ポイントの解説

• ::-webkit-progress-barは、WebKit系ブラウザ（Chrome・Safariなど）でprogress要素のバー部分を擬似要素として操作できるセレクタです。
• :beforeや:afterと組み合わせることで、バーの前後にテキストなどの生成コンテンツを挿入できます。
• contentプロパティにはここでは静的な文字列「989」を指定しています。attr(data-value)のように属性値を参照したい場合でも、ブラウザによってはprogress要素の擬似要素内では正しく評価されないため、まず静的なcontentを設定して動作確認することが重要です。

このように、progress要素のカスタマイズはブラウザごとの実装差が大きいため、WebKit向けのベンダー接頭辞付きセレクタを使い、静的なcontentから段階的に検証していくのが確実なアプローチです。