CSS text-underline-position Eigenschaft - Syntax, Werte, Beispiele

Die CSS-Eigenschaft text-underline-position steuert, wo eine Unterstreichung relativ zum Text gezeichnet wird. Sie hat nur dann eine Wirkung, wenn bereits eine Unterstreichung vorhanden ist — das heißt, wenn das Element text-decoration (oder text-decoration-line) auf underline gesetzt hat. Allein zeichnet text-underline-position keine Unterstreichung; es verschiebt nur eine vorhandene.

Standardmäßig (auto) platziert der Browser die Unterstreichung nahe der alphabetischen Grundlinie des Textes. Das sieht bei den meisten lateinischen Texten gut aus, aber die Linie kann mit den Unterlängen von Buchstaben wie g, j, p, q und y kollidieren. Mit text-underline-position: under wird die Linie unterhalb aller Unterlängen verschoben, sodass sie diese nie kreuzt — nützlich für Code-Listings, mathematische oder chemische Formeln, bei denen ein sauberer Abstand wichtig ist.

Diese Seite behandelt die Syntax, alle Werte, wann man welchen einsetzt, und ausführbare Beispiele.

Wann sollte ich es verwenden?

Sauberere Unterstreichungen — verwende under, damit die Linie Unterlängen (p, y, g) freilässt, anstatt sie zu durchschneiden.
Annotieren von Formeln — bei mathematischen oder chemischen Formeln, wo eine Überschneidung mit der Grundlinie mehrdeutig wäre.
Vertikaler Text — left und right wählen, auf welcher Seite der Glyphen die Linie liegt, wenn writing-mode vertikal ist.

Die Eigenschaft text-underline-position wird von allen modernen Browsern unterstützt.

Anfangswert	auto
Gilt für	Alle Elemente.
Vererbbar	Ja.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.textUnderlinePosition = "under";

Hinweis: In JavaScript werden CSS-Eigenschaften mit Bindestrichen in camelCase umgewandelt (z. B. wird text-underline-position zu textUnderlinePosition).

Syntax

CSS text-underline-position Werte

text-underline-position: auto | [ under || left || right ] | initial | inherit;

Das Schlüsselwort auto kann nicht mit einem anderen Wert kombiniert werden. Die Schlüsselwörter under, left und right können kombiniert werden (z. B. under left), aber left und right schließen sich gegenseitig aus — man kann nur eines davon wählen, optional zusammen mit under.

Beispiel für die text-underline-position Eigenschaft:

CSS text-underline-position Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        text-underline-position: under;
      }
    </style>
  </head>
  <body>
    <h2>Text underline-position property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel für die text-underline-position Eigenschaft mit dem Wert "under":

CSS text-underline-position under-Wert Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        text-underline-position: under;
        text-decoration-color: #1c87c9;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Text underline-position property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Probier es selbst »

Beispiel mit vertikalem writing-mode und dem Wert "left":

Bei vertikalem Text bestimmen left und right, auf welcher Seite der Zeichen die Unterstreichung verläuft.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        writing-mode: vertical-rl;
        text-decoration: underline;
        text-underline-position: left;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Vertical text with text-underline-position: left</h2>
    <p>Lorem Ipsum is simply dummy text.</p>
  </body>
</html>

Werte

Wert	Beschreibung
auto	Standard. Der Browser verwendet einen eigenen Algorithmus, um die Linie an oder knapp unterhalb der alphabetischen Grundlinie zu platzieren.
under	Erzwingt, dass die Unterstreichung unterhalb des Textinhalts liegt, sodass sie die Unterlängen von Buchstaben wie `g`, `p` und `y` freilässt.
left	Im vertikalen writing-mode wird die Unterstreichung links vom Text platziert. Bei horizontalem Text wird dieser Wert ignoriert.
right	Im vertikalen writing-mode wird die Unterstreichung rechts vom Text platziert. Bei horizontalem Text wird dieser Wert ignoriert.
initial	Setzt die Eigenschaft auf ihren Standardwert (`auto`).
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche Aussage über text-underline-position ist korrekt?

Der Wert 'under' platziert die Unterstreichung unterhalb der Unterlängen wie g, p und y.text-underline-position zeichnet eine Unterstreichung auch ohne text-decoration.Der Wert 'auto' kann mit 'under' kombiniert werden (z. B. 'auto under').