HTML5に進捗テキストを表示する方法は？ここで

Question

はHTML

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

で私のコードである私は、プログレスバーを見ることができますが、何のテキスト表示はありません。新しい要素を追加せずにバーにテキストを「10％」表示させるにはどうすればよいですか？そこにあれば、私はと思っていCSS

div {margin-top: -20px} 

で、このような

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

として、プログレスバーの上に重なるようにextralテキストを使用している私は今考えることができます

それを達成するより良い方法はありますか？ CSSで擬似要素を使って

https://jsfiddle.net/etLv3z4b/

Answer 1

（あるいは少なくともそれは私が知っている唯一の方法です）。つまり、::beforeと::afterを使用します。私の得点を得るには、css-tricks.comからこの便利な記事を参照してください。

私はそれが助けてくれることを願っています。