如何在 HTML5 中显示进度文本？

Question

这是我在 HTML

中的代码

<progress min="0" max="100" value="10"><span>0</span>%</progress>

可以看到进度条，但是没有文字显示。如何在不添加新元素的情况下使文本“10%”显示在栏上？

我现在能想到的就是用extra text重叠在进度条上面，比如

<progress min="0" max="100" value="10"></progress>
<div><span>0</span>%<div>

和CSS

div {margin-top: -20px}

我在想有没有更好的实现方式？

https://jsfiddle.net/etLv3z4b/

Answer 1

在 CSS 中使用伪元素（或者至少这是我知道的唯一方法）。即，使用 ::before 和 ::after。请参阅 css-tricks.com 中的这篇方便的文章来了解我的观点。

希望对您有所帮助。