text-underline-position

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2020.

* Some parts of this feature may have varying levels of support.

Die text-underline-position CSS Eigenschaft legt die Position der Unterstreichung fest, die mit dem underline-Wert der text-decoration Eigenschaft festgelegt wird.

Probieren Sie es aus

Syntax

css
/* Single keyword */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* Multiple keywords */
text-underline-position: under left;
text-underline-position: right under;

/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;

Werte

auto

Der User Agent verwendet seinen eigenen Algorithmus, um die Linie auf oder unter der alphabetischen Grundlinie zu platzieren.

from-font

Wenn die Schriftartdatei Informationen über eine bevorzugte Position enthält, wird dieser Wert verwendet. Wenn die Schriftartdatei diese Informationen nicht enthält, verhält es sich so, als ob auto gesetzt wurde, wobei der Browser eine geeignete Position wählt.

under

Erzwingt, dass die Linie unterhalb der alphabetischen Grundlinie gesetzt wird, an einer Stelle, an der sie keine Unterlängen kreuzt. Dies ist nützlich, um die Lesbarkeit bei chemischen und mathematischen Formeln zu gewährleisten, die häufig tiefgestellte Zeichen verwenden.

left

In vertikalen Schreibmodi zwingt dieses Schlüsselwort die Linie dazu, auf der linken Seite des Textes platziert zu werden. In horizontalen Schreibmodi ist es ein Synonym für auto.

In vertikalen Schreibmodi zwingt dieses Schlüsselwort die Linie dazu, auf der rechten Seite des Textes platziert zu werden. In horizontalen Schreibmodi ist es ein Synonym für auto.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

text-underline-position = 
auto |
[ under || [ left | right ] ]

Beispiele

Ein einfaches Beispiel

Wir erstellen zwei Beispielabsätze:

html
<p class="horizontal">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

<p class="vertical">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

Unser CSS sieht so aus:

css
p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.horizontal {
  text-underline-position: under;
}

.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

In diesem Beispiel setzen wir bei beiden Absätzen eine dicke Unterstreichung. Im horizontalen Text verwenden wir text-underline-position: under;, um die Unterstreichung unterhalb aller Unterlängen zu platzieren.

Bei Text mit einem vertikalen writing-mode können wir dann die Werte left oder right verwenden, um die Unterstreichung links oder rechts vom Text erscheinen zu lassen, wie gewünscht.

Das Live-Beispiel sieht so aus:

Globale Einstellung von text-underline-position

Da die text-underline-position Eigenschaft vererbt wird und nicht durch die text-decoration Kurzschreibweise zurückgesetzt wird, kann es sinnvoll sein, ihren Wert auf globaler Ebene festzulegen. Zum Beispiel könnte der under Wert für ein Dokument mit vielen chemischen und mathematischen Formeln, die häufig tiefgestellte Zeichen verwenden, passend sein.

css
:root {
  text-underline-position: under;
}

Spezifikationen

Specification
CSS Text Decoration Module Level 3
# text-underline-position-property

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-underline-position
from-font
left
right
under

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch