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

Question

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

我确实尝试使用下面的代码，但没有成功。有什么方法可以在进度条或进度标签/元素的主体上显示进度百分比。

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

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>