How to display data label inside compatible HTML5 progress browser?

Question

I have an HTML5 progress bar for which I would like to show a data label inside a compatible progress browser. It is currently displayed above the progress bar.

HTML:

<progress max="100" value="50" data-label="50% Complete"></progress> 

CSS

 progress { text-align:center; height: 1.5em; width: 100%; -webkit-appearance: none; border: none; } progress:before { content: attr(data-label); font-size: 0.8em; vertical-align: 0 } progress::-webkit-progress-bar { background-color: #c9c9c9; } progress::-webkit-progress-value { background-color: #7cc4ff; } progress::-moz-progress-bar { background-color: #7cc4ff; } 

I get the following result (see image), but I would like to move the data label inside the progress bar:

Thank you for your advice.

Answer 1

TL DR: Do not use pseudo elements in the <progress> element.

As other answers said, and me in the comments , an HTML / CSS progress bar would be a better solution than using the <progress> element.

Gecko-based browsers such as firefox will not display a pseudo-element at all.

However, to answer your question, just put the text on the progress bar:

 progress { text-align: center; height: 1.5em; width: 100%; -webkit-appearance: none; border: none; /* Set the progressbar to relative */ position:relative; } progress:before { content: attr(data-label); font-size: 0.8em; vertical-align: 0; /*Position text over the progress bar */ position:absolute; left:0; right:0; } progress::-webkit-progress-bar { background-color: #c9c9c9; } progress::-webkit-progress-value { background-color: #7cc4ff; } progress::-moz-progress-bar { background-color: #7cc4ff; } 

 <progress max="100" value="50" data-label="50% Complete"></progress> 

Please note that this does not have good browser support (actually it’s pretty terrible), because <progress> is a replaced element , for example <input> .

CSS specifications are not entirely clear if replaced elements can have pseudo-elements, so different browsers have different visualizations. Webkit-based browsers such as Chrome will sometimes display them. Based on Gecko, such as Firefox, will not.

See this answer to a somewhat similar question.

So, if this is for a site, not electron or similar, I highly recommend using the HTML / CSS Progress bar:

 .progress { height: 1.5em; width: 100%; background-color: #c9c9c9; position: relative; } .progress:before { content: attr(data-label); font-size: 0.8em; position: absolute; text-align: center; top: 5px; left: 0; right: 0; } .progress .value { background-color: #7cc4ff; display: inline-block; height: 100%; } 

 <div class="progress" data-label="50% Complete"> <span class="value" style="width:50%;"></span> </div> 

Note. Even if this is for an application with a webkit-based browser, you still should not use psuedo elements on <progress> . As I said above, the specifications for this functionality are unclear what might change in the future, breaking your element of progress. Webkit may also decline to support this.

I would recommend just using the HTML / CSS progress bar, you will save a ton of trouble in the future.