使用CSS在栏上显示进度条的值（数字），如55％

Question

我想在身体上显示进度条的值以及颜色。

我确实尝试使用下面的代码，但无法成功。有没有办法显示进度条或进度标记/元素正文的进度百分比。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以为每个progress元素添加一个伪元素，并使用attr() CSS function将value属性显示为伪元素的内容：

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>

Answer 2

<progress id="progressBar" value="50" max="100" align="center" style="width:400px;"></progress>

progress#progressBar:before {
    display: inline;
    content: "%" attr(value);
}