CSS-Eigenschaft text-decoration-line
Die Eigenschaft text-decoration-line legt die Art der Linie fest, die für die Textdekoration verwendet wird.
Die Eigenschaft text-decoration-line ist eine der CSS3-Eigenschaften.
Die Eigenschaft text-decoration-line akzeptiert einen oder mehrere Werte.
INFO
Die Eigenschaft text-decoration-line wird in allen modernen Browsern vollständig unterstützt, ohne Vendor-Prefixes.
| Anfangswert | none |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.textDecorationLine = "overline underline"; |
Syntax
CSS-Syntax für text-decoration-line
text-decoration-line: none | underline | overline | line-through | initial | inherit;Beispiel für die Eigenschaft text-decoration-line:
CSS-Codebeispiel für text-decoration-line
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Ergebnis
Beispiel für die Eigenschaft text-decoration-line mit dem Wert "underline":
CSS-Codebeispiel für text-decoration-line mit dem Wert underline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Beispiel für die Eigenschaft text-decoration-line mit dem Wert "line-through":
CSS-Codebeispiel für text-decoration-line mit dem Wert line-through
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: line-through;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Beispiel für die Eigenschaft text-decoration-line mit allen Werten:
CSS-Codebeispiel für text-decoration-line mit allen Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 20px 0;
}
div.t1 {
text-decoration-line: none;
}
div.t2 {
text-decoration-line: underline;
}
div.t3 {
text-decoration-line: line-through;
}
div.t4 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<div class="t1">
Lorem Ipsum is simply dummy text...
</div>
<div class="t2">
Lorem Ipsum is simply dummy text...
</div>
<div class="t3">
Lorem Ipsum is simply dummy text...
</div>
<div class="t4">
Lorem Ipsum is simply dummy text...
</div>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| none | Es wird keine Linie angegeben. | Ausprobieren » |
| underline | Gibt eine Linie unter dem Text an. | Ausprobieren » |
| overline | Gibt eine Linie über dem Text an. | Ausprobieren » |
| line-through | Gibt eine Linie durch den Text an. | Ausprobieren » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Die Eigenschaft text-decoration-line unterstützte zuvor einen Wert blink, der Text blinken ließ, dieser Wert ist jedoch jetzt veraltet.
Praxis
Welche davon sind gültige Werte für die 'text-decoration-line'-Eigenschaft in CSS?