Wie kann ich ein Etikett in einem Fortschrittsbalken-Tag hinzufügen?

Question

Ich möchte wie ein Etikett in meinem Fortschrittsbalken Tag hinzuzufügen in diesem schönen Beispiel:

Unter der Annahme, das Blaus ist der Wert und die rote ist der max, wie kann ich ein Etikett im Innern gibt hinzuzufügen wie mein "35"?

Answer 1

Verwenden Sie CSS position:relative, um den Text auf die Leiste zu manövrieren.

A quick and dirty Lösung für eine kurze bar ist:

position: relative; 
left: -100px; 

wo links den Text zwingt, die an der Bar oben drauf nächste sein würde.

In den Kommentaren machte Matthias den Punkt, dass left nicht funktioniert, wenn der Fortschrittsbalken 100% Breite ist.

Es funktioniert nicht, weil es den Text unterhalb der Leiste erzwingt. Es wird für jede Breite des Balkens nicht ausreichen, um den Text darunter zu erzwingen.

Stattdessen müssen Sie ein bisschen schlauer bekommen und so etwas wie:

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

Hier oben: -1.5em ersetzt die linke Einstellung im jsFiddle. Der Rand links ist ein Versuch, den Text zu zentrieren. Es sollte eigentlich etwas weniger als 50% sein.

Wenn jemand eine bessere Lösung hat, um den Text auf der Bar zu zentrieren, der weniger hacky ist als die Hand-wellige 50% ish-Marge, fühlen Sie sich frei, es zu kommentieren und ich werde das wieder einstellen.

Answer 2

Ich habe versucht, dies selbst zu tun und stieß schließlich auf einen Workaround.

das Pseudoelement verwenden: bevor Sie es eine andere Art und Weise

Sie verwenden tun können Inhalt: attr (Wert) wie folgt aus: https://jsfiddle.net/96z0gwv7/1/ - mehr CSS-Styling auf Link Wenn Sie

progress 
{ 
    text-align:center; 
} 

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

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

Wenn Sie nicht jedes Mal dasselbe Textformat wünschen, können Sie das Datenattribut verwenden (z. B. Datenetikett)

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