CSS Grundlagen: Mit Text-Decoration

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.

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

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 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.

/* 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 aber nicht verwenden.