CODEWITHSUNDEEP
htmlprogress-bar
Weijing Jay Lin
Weijing Jay Lin

Reputation: 3238

how to display progress text in HTML5?

Here is my code in HTML

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

I can see the progress bar, but there is no text display. How can I make the text "10%" display on the bar without add new element?

What I can think of right now is using extral text to overlap on the top of the progress bar, such as

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

with CSS

div {margin-top: -20px}

I'm thinking of if there is better way to achieve it?

https://jsfiddle.net/etLv3z4b/

Upvotes: 1

Views: 1739

Answers (1)

Marwan Alani
Marwan Alani

Reputation: 276

Using pseudo elements in CSS (or at least that's the only way I know). That is, using ::before and ::after. Please refer to this handy article from css-tricks.com to get my point.

I hope that helped.

Upvotes: 2

Related Questions