Textdekorationslinie - CSS-Tricks

Anonim

Die text-decoration-lineEigenschaft verziert Text mit einer Unterstreichung, Überstreichung, Durchleitung oder einer Kombination dieser Zeilen.

p ( text-decoration-line: underline; )

Werte

  • none: Es wird keine Zeile hinzugefügt und vorhandene Zeilen werden entfernt. Beispielsweise nonewird die Standardunterstreichung für Links entfernt.
  • underline: Fügt eine 1px-Unterstreichung unter dem Text hinzu.
  • overline: Fügt eine 1px-Überschrift über dem Text hinzu.
  • line-through: Fügt eine 1px-Zeile durch den Text hinzu.
  • inherit: erbt die Dekoration des Elternteils.

Der Wert blinkbefindet sich in der W3C-Spezifikation, ist jedoch veraltet und funktioniert in keinem aktuellen Browser. Wenn es funktionierte, ließ es den Text „blinken“, indem es schnell zwischen 0% und 100% Deckkraft umgeschaltet wurde.

Werte kombinieren

Sie können die Werte ,, oder in einer durch Leerzeichen getrennten Liste kombinieren underline, um mehrere Dekorationslinien hinzuzufügen:overlineline-through

p ( text-decoration-line: overline underline line-through; )

Verwendung

Die text-decoration-lineImmobilie ist praktisch identisch mit der ursprünglichen text-decorationImmobilie. Wenn Sie Ihrem Text text-decorationnur eine oder mehrere Zeilen hinzufügen möchten, ist dies eine bessere Wahl, da sie von jedem Browser unterstützt werden, auch von sehr alten. Im Allgemeinen ist die Verwendung einer text-decoration-lineDeklaration nur dann sinnvoll, wenn Sie eine Regel im Langhandstil schreiben, die text-decoration-styleeine text-decoration-colorDeklaration enthält oder enthält . Wenn Sie alle drei zusammen verwenden möchten, können Sie die Shorthand- text-decorationEigenschaft verwenden.

Kurzschrift

text-decoration-linekann in Kombination mit text-decoration-styleund text-decoration-colorin der Kurzform CSS3- text-decorationEigenschaft verwendet werden (derzeit unterstützt dies nur Firefox vollständig):

.underlined ( text-decoration: underline dotted red; )

Demo

Diese Demo funktioniert in Safari, Firefox und Chrome mit aktivierten experimentellen Webplattformfunktionen. Der blinkWert ist nicht enthalten.

Siehe die Stift-Textdekorationszeile von CSS-Tricks (@ css-Tricks) auf CodePen.

verbunden

  • Textdekoration
  • Text-Dekoration-Stil
  • Text-Dekoration-Farbe
  • Text-Dekoration-überspringen

Mehr Informationen

  • text-decoration-line in der W3C-Spezifikation
  • text-decoration-line bei MDN

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
31 * † 7.1 * 6 ‡ Keiner Keiner Keiner 8 *

* mit -webkitPräfix
† mit aktiviertem Flag für experimentelle Webplattform- Funktionen
‡ 6 - 35 mit -mozPräfix, ab 36 nicht mehr vorfixiert.