text-decoration-line
CSS text-decoration-line Property
The text-decoration-line property specifies the kind of line which will be used for text decoration.
The text-decoration-line property is one of the CSS3 properties.
The text-decoration-line property accepts one or more values.
The -webkit- extension for Safari is used with the text-decoration-line property.
| 类目 | 类目 |
|---|---|
| Initial Value | none |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.textDecorationLine = “overline underline”; |
Syntax
Syntax
text-decoration-line: none | underline | overline | line-through | initial | inherit;
Example of the text-decoration-line property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
-webkit-text-decoration-line: overline;
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>
Result
Example of the text-decoration-line property with the “underline” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>
Example of the text-decoration-line property with the “line-through” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
-webkit-text-decoration-line: line-through;
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>
Example of the text-decoration-line property with all the values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 20px 0;
}
div.t1 {
-webkit-text-decoration-line: none;
text-decoration-line: none;
}
div.t2 {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
div.t3 {
-webkit-text-decoration-line: line-through;
text-decoration-line: line-through;
}
div.t4 {
-webkit-text-decoration-line: overline;
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>
Values
Values
| Value | Description | Play it |
|---|---|---|
| none | No line is specified. | Play it » |
| underline | Specifies a line under the text. | Play it » |
| overline | Specifies a line over the text. | Play it » |
| line-through | Specifies a line through the text. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
Besides the above-mentioned values the text-decoration-line property had “blink” value which made text blink. This value is deprecated.