CSS-Beschreibung des Implementierungscodes zur Anzeige von Text am Ende des horizontalen Fortschrittsbalkens

<div Klasse="Inhalt">
  <div Klasse="Bar zuerst" Stil="Breite:100%">
    <span>688</span>
  </div>
  <div Klasse = "Bar Sekunde" Stil = "Breite: 50%">
    <span>688</span>
  </div>
  <div Klasse = "bar third" Stil = "width:80%">
    <span>688</span>
  </div>
</div>

.Bar {
  Höhe: 12px;
  Rand oben: 1px;
  Position: relativ;
  &.Erste {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #ecf848 0 %, #f9eab9 99 %);
  }
  &.zweite {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f5b549 0 %, #f9d6b9 100 %);
  }
  &.dritte {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f57849 0 %, #f9c7b9 100 %);
  }
  Spanne{
    Position: absolut;
	rechts: 0;
    Schriftgröße: 12px;
    Farbe: rgba(255, 255, 255, 0,7);
  }
}

.Bar {
  Höhe: 12px;
  Rand oben: 1px;
  Position: relativ;
  &.Erste {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #ecf848 0 %, #f9eab9 99 %);
  }
  &.zweite {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f5b549 0 %, #f9d6b9 100 %);
  }
  &.dritte {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f57849 0 %, #f9c7b9 100 %);
  }
  Spanne{
    Position: absolut;
    links: calc(100% + 8px);
    Schriftgröße: 12px;
    Farbe: rgba(255, 255, 255, 0,7);
  }
}

.Bar {
  Höhe: 12px;
  Rand oben: 1px;
  Position: relativ;
  &.Erste {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #ecf848 0 %, #f9eab9 99 %);
  }
  &.zweite {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f5b549 0 %, #f9d6b9 100 %);
  }
  &.dritte {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f57849 0 %, #f9c7b9 100 %);
  }
  Spanne{
    Position: absolut;
    rechts:0;
    transformieren: übersetzen(100 %, 0);
    Schriftgröße: 12px;
    Farbe: rgba(255, 255, 255, 0,7);
  }
}