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

Question

这是我的HTML代码

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

我可以看到进度条，但没有文字显示。如何制作文字＆＃34; 10％＆＃34;在条上显示而不添加新元素？

我现在能想到的是在进度条的顶部使用外部文本重叠，例如

<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中这篇方便的文章来了解我的观点。

我希望有所帮助。