Come posso aggiungere un'etichetta all'interno di un tag della barra di avanzamento?

Question

Voglio aggiungere un'etichetta nel mio tag barra di avanzamento come in questo bellissimo esempio:

Supponendo che il blu è il valore e il rosso è il massimo, come posso aggiungere un'etichetta all'interno lì come il mio "35"?

Answer 1

Utilizzare i codici CSS position:relative per spostare il testo sulla barra.

Una soluzione rapida e sporca per un breve bar è:

position: relative; 
left: -100px; 

cui sinistra costringe il testo che sarebbe vicino al bar su di esso.

Nei commenti, Matthias ha sottolineato che lo standard left non funziona se la barra di avanzamento è 100% di larghezza.

Non funziona perché forza il testo sotto la barra. Fallirà per qualsiasi larghezza di barra sufficiente per forzare il testo sottostante.

Invece si deve ottenere un po 'più intelligente e fare qualcosa di simile:

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

Qui la parte superiore: 1.5em sostituisce la regolazione sinistra nella jsFiddle. Il margine sinistro è un tentativo di centrare il testo. In realtà dovrebbe essere un po 'meno del 50%.

Se qualcuno ha una soluzione migliore per centrare il testo sulla barra che è meno hacky rispetto al margine ish al 50% ondulato a mano, sentitevi liberi di commentarlo e aggiusterò di nuovo.

Answer 2

Ho tentato di farlo da solo e alla fine ho trovato una soluzione alternativa.

Utilizzando l'elemento pseudo: prima si può fare un modo diverso

Si utilizza contenuti: attr (valore) in questo modo: https://jsfiddle.net/96z0gwv7/1/ - più CSS styling sul collegamento

progress 
{ 
    text-align:center; 
} 

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

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

Se Non volendo lo stesso formato di testo ogni volta, è possibile utilizzare l'attributo dei dati (ad esempio data-label)

.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>