且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用CSS在进度条上显示进度条的值(数字),例如55%

更新时间:2022-10-28 11:55:04

您可以为每个progress元素添加一个伪元素,然后使用

You can add a pseudo element to each progress element and use the attr() CSS function to display the value attribute as the content of the pseudo element:

progress {
  text-align: center;
}
progress:after {
  content: attr(value)'%';
}

<progress max="100" value="26"></progress><br/>
<progress max="100" value="50"></progress><br/>
<progress max="100" value="73"><span></span></progress>