Gegeben die HTML
%Vor% Ich möchte den Text 0.5491 oben auf dem meter . Ich habe versucht, den Text mit den üblichen CSS-Techniken zu stylen, aber es wird nicht angezeigt. Im Inspector heißt es nur Breite und Höhe ist 0 egal wie oft ich Dinge sage wie
Ich habe mehr Versuche unternommen, diese Beispiele sind vereinfacht. Ich benutze Firefox für Tests und Kompatibilität ist kein Problem (Inhouse-Projekt).
Ich bevorzuge eher "hässliche css" Lösung über "hässliche html" Lösung.
Update: (um einige Kommentare zusammenzufassen)
Es scheint eine gewisse Magie zu geben, die den Inhalt von Meter unsichtbar macht (einschließlich der Inhalte von meter :: after, meter span :: after und similar Komponenten) in Firefox. Die Frage ist also, ob es ein CSS gibt, das dies überschreiben kann. Die Einstellung von Breite, Höhe und Sichtbarkeit hat nicht geholfen.
Nutzen Sie CSS3 ::after und fügen Sie es wie folgt zu meter tag hinzu.
Dies zeigt den Text unter meter .
Da OP gesagt hat, dass er mehrere Elemente haben möchte, hat er den Code aktualisiert. Position von absolute in relative geändert, so dass der Text immer relativ zum meter
Um es in meter erscheinen zu lassen, style es mit position:absolute und gib top oder margin-top und left wie folgt
Weitere Informationen zu ::after finden Sie unter MDN
Außerdem können Sie das Element span entfernen.
Hier verwenden wir die Funktion attr() in css. Lesen Sie darüber in MDN
Probieren Sie das folgende Snippet
aus
Der obige Code funktioniert nicht in Firefox. Es ist ein bekanntes Problem, dass ::after und ::before pseudos nur in Webkit-Browsern funktionieren.
Für Firefox, versuchen Sie den folgenden Code (Dies ist global. Es wird in allen Browsern funktionieren)
Welpe, das ist eine interessante Frage. Das einzige, was mir einfällt, ist die content Eigenschaft, die in ::before und ::after Pseudo-Selektor.
Das Problem ist jedoch der Wert, vorausgesetzt, Sie haben mehrere Zähler. Nun, ich habe eine Lösung dafür, denke ich: das attr(...) Schlüsselwort des Inhalts.
Sie müssen also nur einen Wert als Attribut angeben, wie das data-value hier unten.
Dann werden einfach die Positionen des hinzugefügten Inhalts hinzugefügt und angepasst.
Aber ... Leider wird es (noch) nicht allgemein unterstützt. Nur Chrom denke ich ...
hinzufügen :: vor Selektor zu css können Sie den Text oben auf Meter anzeigen
CSS:
%Vor%HTML:
%Vor%Ich denke, das ist die beste Lösung, in den Wert des Zählers die Daten
%Vor%