web-dev-qa-db-ja.com

プログレスバータグ内にラベルを追加するにはどうすればよいですか？

この美しい例のように、プログレスバータグにラベルを追加したいと思います。

enter image description here

青が値で赤が最大であると仮定すると、「35」のようなラベルをそこに追加するにはどうすればよいですか？

htmlprogress-bar
19
Brained Washed

私はこれを自分でやろうとしましたが、ついに回避策に出くわしました。

疑似要素の使用：別の方法で実行する前に

content：attr（value）を次のように使用します： https://jsfiddle.net/96z0gwv7/1/ --moreリンク上のCSSスタイリング

progress
{
  text-align:center;
}

progress:before {
  content: 'Value is ' attr(value);
}

<progress value="6" max="10"></progress>
<progress value="9" max="10"></progress>

毎回同じテキスト形式が必要ない場合は、データ属性を使用できます（つまり、data-label）

.unique:before {
   content: attr(data-label);
}

<progress class="unique" value="9" max="10" data-label="90% completed"></progress>
<progress class="unique" value="0" max="10" data-label="About to begin"></progress>
3
user2536988