Diese Frage hat hier bereits eine Antwort:

Ist es mit CSS möglich, die Unterstreichung einer Überschrift weniger breit als den Überschriftentext zu machen? Ich habe den folgenden Stil für eine H1-Überschrift:

h1 {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px #d2202f solid;
}

Dies erzeugt eine dünne rote Unterstreichung unterhalb meiner H1-Überschriften. Ist es jedoch möglich, die Unterstreichung so zu gestalten, dass 50% des Texts in der Überschrift enthalten sind?