Text-Unterstreichungsposition - CSS-Tricks

Anonim

Die text-underline-positionEigenschaft legt die Platzierung der Unterstreichung auf Links oder auf Text mit text-decoration: underline;angewendet fest.

a ( text-underline-position: under; )

Werte

Dies sind die Werte, die in der Kandidatenempfehlung des W3C CSS-Textdekorationsmoduls der Stufe 3 angegeben sind:

  • auto: der Standard. Der Browser entscheidet, ob die Unterstreichung an der Grundlinie des Textes oder darunter platziert wird.
  • inherit: erbt die Unterstreichungsposition des übergeordneten Elements.
  • under: Platziert die Unterstreichung unter dem Text mit zusätzlichem Leerzeichen, um das Überqueren von Nachkommen zu verhindern.
  • left: für vertikale Schreibmodi. Dadurch wird die Zeile links vom Text platziert.
  • right: für vertikale Schreibmodi. Dadurch wird die Zeile rechts vom Text platziert.

Microsoft verwendet für Internet Explorer einen anderen Wertesatz:

  • auto: der Standard. Platziert die Unterstreichung für alle Sprachen außer Japanisch unter dem Text (Einzelheiten finden Sie unter dem MSDN-Link im Abschnitt „Weitere Informationen“ unten).
  • above: positioniert die Unterstreichung über dem Text. Optisch identisch mittext-decoration: overline;
  • below: positioniert die Unterstreichung unter dem Text. Beachten Sie, dass dies anders ist als under- es werden keine Nachkommen gelöscht.
  • auto-posfunktioniert genauso wie die MS-Implementierung von auto.

Demo

Zum Zeitpunkt dieses Schreibens text-underline-positionwird Chrome (33+ mit aktivierten experimentellen Flags) und Internet Explorer 6+ nur teilweise unterstützt. Chrome unterstützt auto, inheritund underWerte aus dem W3C Candidate Recommendation, während IE seine eigenen alternativen Werten unterstützt.

Diese Demo zeigt die underund below-Werte in den Browsern, die sie unterstützen.

Siehe die Text-Unterstreichungsposition des Stifts durch CSS-Tricks (@ css-Tricks) auf CodePen.

verbunden

  • Textdekoration

Mehr Informationen

  • text-underline-position im CSS-Textdekorationsmodul Level 3 CR.
  • text-underline-position bei MSDN.

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
33 * Keiner Keiner Keiner 6 † Keiner Keiner

* mit -webkitaktiviertem Präfix und experimentellen Flags in chrome: // flags. leftund rightWerte werden nicht unterstützt.
† mit -msPräfix und IE-spezifischen Werten.