CSS Grundlagen: Text-Decoration – Text farbig unterstreichen • Text gestalten

CSS Property text-decoration – Text unterstreichen

Mit der CSS-Eigenschaft text-decoration kann man Text unterstreichen, durchstreichen oder überstreichen. Text unterstreichen bzw. überstreichen nennt man auch Unterstrich bzw. Überstrich.

CSS-Eigenschaft: Text-Decoration
Beschreibung mögliche Werte Standardwert Kategorie
Text-Dekoration none
underline
overline
line-through
blink
initial
inherit		 none Textdarstellung
Text

Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft text-decoration.

Anzeige
Beachte:

  1. Die Eigenschaft wird standardmäßig in folgender Form verwendet:

    • keine Linie zeichnen ➜ text-decoration: none
    • mit einfacher Linie unterstreichen ➜ text-decoration: underline
    • mit einfacher Linie überstreichen ➜ text-decoration: overline
    • mit einfacher Linie durchstreichen ➜ text-decoration: line-through

  2. Optional kann man zusätzlich die Strichfarbe der Linie angeben. Die Strichfarbe kann man z.B mit dem HTML Farb-Code #RRGGBB definieren. Alternativ zum Hex-Code kann man Farben auch mit einem HTML Farbnamen definieren.

  3. Optional kann man zusätzlich die Strichstärke angeben.

  4. Optional kann man zusätzlich den Strichtyp festlegen. Folgende Werte sind möglich:

    • solid ➜ einfache durchgezogene Linie
    • double ➜ doppelte durchgezogene Linie
    • dotted ➜ einfache gepunktete Linie
    • dashed ➜ einfache unterbrochene Linie
    • wavy ➜ einfache Wellen-Linie

  5. Der Wert blink ist veraltet und sollte nicht mehr benutzt werden. Alle gängigen Browser unterstützen blink nicht mehr.

  6. initial erzwingt die Wiederherstellung der ursprünglichen Textausrichtung, d.h. der Wert initial stellt für die Eigenschaft text-decoration wieder den Standardwert ein.

Anzeige
Beispiel 
/* Absatz */
p {
  /* 10% größer als Standard */
  font-size: 1.1em;

  /* Schriftfarbe schwarz */
  color: black;
}


/* Text rot unterstrichen */
u {
  /* doppelt stark unterstreichen */
  text-decoration: underline red 2px double;
}

Im HTML-Code kann man das U-Tag   (u für Englisch: underline) verwenden, um Text auszuzeichnen, der anders als normaler Text dargestellt werden soll. Dies können z.B. falsch geschriebene Wörter sein. In der HTML-Spezifikation wird die Verwendung des u-Tags kritisiert. Um Text zu unterstreichen, ist die Definition einer eigenen Klasse (underline) die bessere Wahl.

.underline {
  /* Text unterstreichen */
  text-decoration: underline;
}

Im HTML-Code wird der Text, der unterstrichen werden soll, z.B. mit <span class="underline"> eingeleitet und mit </span> abgeschlossen.

Grundsätzlich sollte man Unterstreichen als Hervorhebung nicht verwenden.

Anzeige