Jak mogę dodać etykietę do znacznika paska postępu?

Question

Chcę dodać etykietę w moim pasek postępu tagu jak w tym pięknym przykładu:

Zakładając, że niebieski jest wartością, a czerwony jest max, jak mogę dodać etykietę wewnątrz tam jak moje "35"?

Answer 1

Użyj kodu CSS position:relative, aby manewrować tekstem na pasku.

Szybkie i zabrudzony rozwiązanie na krótki pasek jest:

position: relative; 
left: -100px; 

gdzie lewa zmusza tekst, który byłby obok paska na górze.

W komentarzach Matthias podkreślił, że left nie działa, jeśli pasek postępu ma szerokość 100%.

To nie działa, ponieważ wymusza tekst poniżej paska. Nie uda się dla dowolnej szerokości paska wystarczającej do wymuszenia poniższego tekstu.

Zamiast tego trzeba się trochę bardziej mądry i zrobić coś takiego:

position: relative; 
    top: -1.5em; 
    margin-left: 50%; 

tutaj top: -1.5em zastępuje lewy regulację w jsFiddle. Lewy margines jest próbą wyśrodkowania tekstu. W rzeczywistości powinno być nieco mniej niż 50%.

Jeśli ktoś ma lepsze rozwiązanie, aby wyśrodkować tekst na pasku, który jest mniej hackowaty niż ręcznie falisty margines 50%, nie krępuj się, aby go skomentować, a poprawię to ponownie.

Answer 2

Próbowałem zrobić to samemu i ostatecznie znalazłem obejście.

Korzystanie element pseudo: zanim będzie można zrobić to w inny sposób

użyć treści: w ciekawy (wartość) tak: https://jsfiddle.net/96z0gwv7/1/ - więcej CSS stylizacji na linku

progress 
{ 
    text-align:center; 
} 

progress:before { 
    content: 'Value is ' attr(value); 
} 

<progress value="6" max="10"></progress> 
<progress value="9" max="10"></progress> 

jeśli nie jesteś chcąc tego samego formatu tekstowego za każdym razem, a następnie można użyć atrybutu danych (tj danych etykieta)

.unique:before { 
    content: attr(data-label); 
} 

<progress class="unique" value="9" max="10" data-label="90% completed"></progress> 
<progress class="unique" value="0" max="10" data-label="About to begin"></progress>