CSS text-decoration-line Property
CSS text-decoration-line property sets the type of decoration to use for text in HTML Element(s).
The syntax to specify a value for text-decoration-line property is
text-decoration-line: value;
The following table gives the possible values that could be given to text-decoration-line property.
| Value | Description | Examples |
|---|---|---|
| none | No decoration. Default value. | text-decoration-line: none; |
| underline | Display a line under the text. | text-decoration-line: underline; |
| overline | Display a line over the text. | text-decoration-line: overline; |
| line-through | Display a line through the text. | text-decoration-line: line-through; |
| initial | Sets text-decoration-line to default value. | text-decoration-line: initial; |
| inherit | Inherits text-decoration-line value from its parent element. | text-decoration-line: inherit; |
Examples
In the following examples, we decorate the text using text-decoration-line property.
Underline
In the following example, we decorate the text with an underline, using text-decoration-line property.
Example
Overline
In the following example, we decorate the text with an over line, using text-decoration-line property.
Example
Line-through
In the following example, we decorate the text with a line through the text, using text-decoration-line property.
Example
Multiple Text Decoration Line Values
We can also set text-decoration-line property with multiple values in a single assignment.
In the following example, we have set text-decoration-line property with both underline and line-through, as shown in the following example.
Example
Conclusion
In this CSS Tutorial, we learned about text-decoration-line property, and how to use this property for HTML Elements, with examples.