text-underline-position

Die Eigenschaft text-underline-position legt die Position des Unterstrichs bei Links oder Text mit angewendetem text-decoration: underline; fest.

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

Werte

Dies sind die Werte, die in der W3C CSS Text Decoration Module Level 3 Candidate Recommendation angegeben sind.

• auto: der Standardwert. Der Browser entscheidet, ob der Unterstrich auf der Grundlinie des Textes oder darunter platziert wird.
• inherit: erbt die Unterstrich-Position des Elternelements.
• under: platziert den Unterstrich unter dem Text mit zusätzlichem Abstand, um absteigende Zeichen zu vermeiden.
• left: für vertikale Schreibweisen. Platziert die Linie links vom Text.
• right: für vertikale Schreibweisen. Platziert die Linie rechts vom Text.

Microsoft verwendet einen anderen Satz von Werten für den Internet Explorer.

• auto: der Standardwert. Platziert den Unterstrich unter dem Text für alle Sprachen außer Japanisch (siehe den MSDN-Link im Abschnitt "Weitere Informationen" unten für Details).
• above: positioniert den Unterstrich über dem Text. Visuell identisch mit text-decoration: overline;.
• below: positioniert den Unterstrich unter dem Text. Beachten Sie, dass dies anders ist als under – es wird absteigende Zeichen nicht berücksichtigen.
• auto-pos funktioniert genauso wie die MS-Implementierung von auto.

Demo

Zum Zeitpunkt der Erstellung dieses Artikels wird text-underline-position nur teilweise von Chrome (33+ mit aktivierten experimentellen Flags) und Internet Explorer 6+ unterstützt. Chrome unterstützt die Werte auto, inherit und under der W3C-Kandidatenempfehlung, während IE seine eigenen alternativen Werte unterstützt.

Diese Demo zeigt die Werte under und below in den Browsern, die sie unterstützen.

Verwandt

• text-decoration

Weitere Informationen

• text-underline-position im CSS Text Decoration Module Level 3 CR.
• text-underline-position bei MSDN.

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
33 *	Keine	Keine	Keine	6 †	Keine	Keine

* mit dem Präfix -webkit und aktivierten experimentellen Flags in chrome://flags. Die Werte left und right werden nicht unterstützt.
† mit dem Präfix -ms und IE-spezifischen Werten.

Verwandt