CSS Grundlagen: Von fade zu fabelhaft – Mit Text-Decoration atemberaubende Texte erzeugen

Text unterstreichen: CSS Eigenschaft Text-Decoration

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

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

1. Diese 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 /li>
   • 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 Textdekoration, d.h. der Wert initial stellt für die Eigenschaft text-decoration den Standardwert ein.

Text mit text-decoration unterstreichen oder durchstreichen

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

  /* Schriftfarbe schwarz */
  color: black;
}


/* Text rot unterstreichen */
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.

Text unterstreichen mit CSS-Klasse

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

Um zu vermeiden, dass unterstrichener Text mit einem Link verwechselt werden kann, sollte man Text nch Möglichkit nicht durch Unterstreichen hervorheben.