CSS text-decoration-line property defines the type of the decoration line such as ‘underline’, ‘overline’, ‘line-through’, etc. The decoration lines are generally used with hyperlinks.
Example:
.p1{
text-decoration-line: underline;
}
.p2{
text-decoration-line: overline;
}
.p3{
text-decoration-line: line-through;
}
The text-decoration-line property can also accept multiple values. These values must be space-separated. See the example below:
Example:
.p1{
text-decoration-line: underline overline;
}
.p2{
text-decoration-line: underline overline line-through;
}
CSS Syntax
The text-decoration-line property has the following syntax:
text-decoration-line: none|underline|overline|line-through|initial|inerit;
Property Values
The text-decoration-line property accepts the following values:
| none | Specifies no underline. This is the default value. It is generally used to remove default underline from the hyperlinks. |
| underline | Sets a line under the text. |
| overline | Sets a line over the text. |
| line-through | Sets a line over the text. This is generally used for non-active links. |
| initial | Sets the text-decoration-line to its default value(none). |
| inherit | Inherits the text-decoration-line property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.textDecorationLine = “line-through” |
