CSS text-decoration Eigenschaft
Die CSS text-decoration Kurzschreibweise legt Linientyp, Stil und Farbe der Textdekoration fest. Werte, Beispiele und praktische Anwendungen.
Die CSS-Eigenschaft text-decoration fügt Text dekorative Linien hinzu — am häufigsten die Unterstreichung unter einem Link, eine durchgehende Linie durch gelöschten Text oder eine Überstreichung zur Hervorhebung. Diese Eigenschaft verwenden Sie, wenn Sie solche Linien hinzufügen oder — ebenso häufig — entfernen möchten.
Diese Seite behandelt die Kurzschreibweise, alle akzeptierten Werte, das Zusammenspiel mit den Langform-Eigenschaften und die praktischen Anwendungsfälle (z. B. das Gestalten von Links).
Was text-decoration bewirkt
In CSS3 ist text-decoration eine Kurzschreibweise, die drei Langform-Eigenschaften auf einmal setzt:
- text-decoration-line — welche Linien erscheinen (
underline,overline,line-throughoder mehrere gleichzeitig). - text-decoration-color — die Linienfarbe (standardmäßig die Textfarbe des Elements,
currentColor). - text-decoration-style — der Linienstil (
solid,double,dotted,dashed,wavy).
Da es sich um eine Kurzschreibweise handelt, wird jede ausgelassene Langform-Eigenschaft auf ihren Ausgangswert zurückgesetzt. Die Linie selbst, text-decoration-line, hat standardmäßig den Wert none — daher ist text-decoration: none die übliche Methode, um die Unterstreichung eines Links zu entfernen.
In der ursprünglichen CSS1-Spezifikation war text-decoration keine Kurzschreibweise. Es war eine einzelne Eigenschaft, die nur folgende Schlüsselwörter akzeptierte:
noneunderlineoverlineline-throughblink(inzwischen veraltet und von modernen Browsern ignoriert)
Die CSS3-Kurzschreibweise ist eine Obermenge dieser Liste, sodass alte Einzelschlüsselwort-Deklarationen wie text-decoration: underline weiterhin genau wie zuvor funktionieren.
Wann sie verwendet werden sollte
- Link-Unterstreichungen entfernen:
a { text-decoration: none; }— dann eigenes Hover-Styling hinzufügen. - Bearbeitungen kennzeichnen:
line-throughfür entfernten Text,underlinefür eingefügten Text. - Individuelle Unterstreichungen: Farbe und
wavy/dotted-Stile kombinieren für Rechtschreibprüfungs-Unterstreichungen oder markante Link-Dekorationen.
Barrierefreiheitshinweis: Unterstreichungen sind das übliche Signal dafür, dass Text ein Link ist. Wenn Sie diese entfernen, machen Sie Links auf andere Weise erkennbar (deutlicher Farbunterschied plus Hover-/Fokus-Unterstreichung), damit der Link für alle Leser eindeutig sichtbar bleibt.
| Eigenschaft | Details |
|---|---|
| Ausgangswert | none currentColor solid (der Ausgangswert jeder Langform-Eigenschaft) |
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS1, CSS3 |
| DOM-Syntax | object.style.textDecoration = "underline dotted red"; |
Syntax
text-decoration: <line> <color> <style> | initial | inherit;<line>ist ein oder mehreretext-decoration-line-Schlüsselwörter (none,underline,overline,line-through).<color>ist ein beliebiger CSS-Farbwert.<style>ist eintext-decoration-style-Schlüsselwort (solid,double,dotted,dashed,wavy).
Die Reihenfolge der drei Teile spielt keine Rolle, und Sie können jeden davon weglassen. Mehrere line-Werte können kombiniert werden — zum Beispiel zeichnet underline overline beide gleichzeitig:
/* underline, in red, with a wavy style */
text-decoration: underline wavy red;
/* two lines at once; color and style fall back to defaults */
text-decoration: underline overline;Beispiel der text-decoration-Eigenschaft:
Beispiel der CSS text-decoration-Eigenschaft mit den Werten overline, line-through, underline und overline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
text-decoration: overline;
}
.b {
text-decoration: line-through;
}
.c {
text-decoration: underline;
}
.d {
text-decoration: underline overline;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
<p class="d">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Ergebnis
Beispiel der text-decoration-Eigenschaft mit einer angegebenen Farbe:
Beispiel der CSS text-decoration-Eigenschaft mit der text-decoration-color-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Das Präfix -webkit- wird hier weggelassen, da moderne Browser die Standardeigenschaft vollständig unterstützen.
Beispiel der text-decoration-Eigenschaft mit einem angegebenen Stil:
Beispiel der CSS text-decoration-Eigenschaft mit den Eigenschaften text-decoration-line und text-decoration-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
}
div.t1 {
text-decoration-style: dotted;
}
div.t2 {
text-decoration-style: wavy;
}
div.t3 {
text-decoration-style: solid;
}
div.t4 {
text-decoration-line: overline underline;
text-decoration-style: double;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<div class="t1">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t2">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t3">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t4">Lorem ipsum is simply dummy text...</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| text-decoration-line | Gibt die Art der Textdekoration an. |
| text-decoration-color | Gibt die Farbe der Textdekoration an. |
| text-decoration-style | Gibt den Stil der Textdekoration an. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
- text-decoration-line — die Linie(n) eigenständig festlegen.
- text-decoration-color — die Dekorationsfarbe unabhängig von der Textfarbe setzen.
- text-decoration-style — solid, double, dotted, dashed oder wavy Linien wählen.