Wyświetl wartość paska postępu (liczba) podobną do 55% na pasku przy użyciu CSS

Question

Chcę pokazać wartość paska postępu na ciele wraz z kolorem.

Próbowałem użyć poniższego kodu, ale nie udało się. Czy jest jakiś sposób, aby pokazać procent postępu na ciele paska postępu lub znacznika postępu/elementu.

<progress max="100" value="26"></progress><br/> 
 
<progress max="100" value="26">26%</progress><br/> 
 
<progress max="100" value="26"><span>26%</span></progress>

Answer 1

Można dodać element pseudo do każdego elementu progress i użyć attr() CSS function aby wyświetlić atrybut value jako treść elementu pseudo:

progress { 
 
    text-align: center; 
 
} 
 
progress:after { 
 
    content: attr(value)'%'; 
 
}

<progress max="100" value="26"></progress><br/> 
 
<progress max="100" value="50"></progress><br/> 
 
<progress max="100" value="73"><span></span></progress>

Answer 2

<progress id="progressBar" value="50" max="100" align="center" style="width:400px;"></progress> 

progress#progressBar:before { 
    display: inline; 
    content: "%" attr(value); 
}