Text-underline-offset

CSS Almanac → Eigenschaften → T → text-underline-offset

Mojtaba Seyedi am 2. Aug 2021

Die CSS-Eigenschaft text-underline-offset legt den Abstand von Textunterstreichungen zu ihrer ursprünglichen Position fest.

.element {
  text-underline-offset: 0.5em;
}

Sobald Sie einem Element eine Unterstreichung mit text-decoration mit dem Wert `underline` zuweisen, können Sie mit der Eigenschaft text-underline-offset festlegen, wie weit diese Linie von Ihrem Text entfernt sein soll.

Werte

auto: (Standard) Der Browser wählt einen geeigneten Offset für Unterstreichungen.
<länge>: Jede gültige Länge mit einer angegebenen Einheit (einschließlich negativer Werte). Dies ersetzt alle Informationen aus der Schriftart und die Standardeinstellung des Browsers.
percentage: Gibt den Offset von Unterstreichungen als Prozentsatz von 1em der Schriftgröße des Elements an.
initial: Die Standardeinstellung der Eigenschaft, die `auto` ist.
inherit: Übernimmt den Unterstreichungs-Offset-Wert des Elternelements.
unset: Entfernt den aktuellen Offset vom Element.

Demo

Im folgenden Demo können Sie den Wert von text-underline-offset ändern, um zu sehen, wie er die Textdekoration des Elements beeinflusst.

Notizen

text-underline-offset ist kein Teil des Kurzschreibweise von text-decoration.
Es funktioniert nicht bei anderen text-decoration-Linien wie line-through oder overline.
Negative Werte sind zulässig und verschieben die Unterstreichung nach innen.

Für Nachfahren ist er konstant

Sobald Sie eine Dekoration für ein Element festlegen, haben alle seine Kinder diese Dekoration ebenfalls. Stellen Sie sich nun vor, Sie möchten den Offset der Unterstreichung für eines der Kinder ändern.

p {
  text-decoration: underline;
  text-underline-offset: 0.5em;
}
 
p span {
  text-underline-offset: 1.5em; /* Doesn't work */
}

Dies funktioniert nicht, da Sie einen Offset einer von Elternelementen festgelegten Unterstreichung nicht überschreiben können. Damit dies funktioniert, müssen Sie eine Unterstreichungspezifität für das Element selbst festlegen.

p {
  text-decoration: underline;
  text-underline-offset: 0.5em;
}
 
p span {
  text-decoration: underline;
  text-underline-offset: 1.5em; /* It works! */
}

Verwendung von em wird empfohlen

Der Vorteil der Verwendung eines relativen Wertes wie em ist, dass sich der Offset mit der Änderung des font-size-Wertes skaliert. Wenn Sie andererseits eine feste Längeneinheit (z. B. Pixel) verwenden, passt sich der Offset nicht an Änderungen an und ist möglicherweise nicht der Abstand, den Sie für Ihren Text wünschen.

Prozentsatz und die Kaskade

Für diese Eigenschaft wird eine Länge als fester Wert vererbt und skaliert nicht mit der Schriftart. Ein Prozentsatz hingegen wird als relativer Wert vererbt und skaliert daher beim Erben mit Änderungen der Schriftart.

Das folgende Demo zeigt den Vergleich zwischen der Verwendung von em- und Prozentwerten im Falle der Vererbung, und wie Sie sehen können, ist auf der linken Seite (bei der wir em verwenden) der vererbte Wert eine feste Länge. Sie können den berechneten Wert in Ihren Entwicklertools überprüfen. Das bedeutet, dass er sich bei Änderung der Schriftart nicht skaliert. Auf der rechten Seite hingegen erben die Texte einen relativen Wert (in diesem Fall 100 %); daher skaliert der Offset mit der Änderung der Schriftart.

Schreibmodi und text-underline-position

Ein vertikaler Schreibmodus hat Auswirkungen auf die Position der Unterstreichung. Dies ändert die Richtung des auf das Element angewendeten Offsets. Spielen Sie mit den Werten im folgenden Demo.