CSS-Eigenschaft Text-Decoration – Text farbig unterstreichen

Text unterstreichen: CSS Property text-decoration

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

CSS-Eigenschaft: text-decoration

Beschreibungmögliche WerteStandardwertKategorie
Text-Dekorationnone
underline
overline
line-through
blink
initial
inherit		noneTextdarstellung
Text

Die »Angabe in oranger Schrift« ist die Standardanwendung dieser CSS-Eigenschaft.

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 Farbe der Linie angeben.

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

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

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

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

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;
}

Text, der unterstrichen werden soll, wird im HTML Code durch <u> eingeleitet und durch </u> abgeschlossen.