Wie wird Fortschrittstext in HTML5 angezeigt?

Question

Hier ist mein Code in HTML

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

ich die Fortschrittsbalken sehen, aber es gibt keine Textanzeige. Wie kann ich den Text "10%" auf der Leiste anzeigen lassen, ohne ein neues Element hinzuzufügen?

Was ich von jetzt denken kann, ist extral Text mit auf der Oberseite des Fortschrittsbalkens zu überlappen, wie

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

mit CSS

div {margin-top: -20px} 

Ich denke an, wenn es ist der bessere Weg, um es zu erreichen?

https://jsfiddle.net/etLv3z4b/

Answer 1

Mit Pseudo-Elemente in CSS (oder zumindest das ist der einzige Weg, ich weiß). Das heißt, ::before und ::after verwenden. Bitte beziehen Sie sich auf diesen handlichen Artikel von css-tricks.com, um meinen Standpunkt zu verstehen.

Ich hoffe, dass das geholfen hat.