CSS Text Decoration
CSS Text Decoration
The CSS text-decoration property is used to control the appearance of decorative lines on text.
It is a shorthand property for the following individual properties:
Add a Decoration Line to Text
The CSS text-decoration-line property sets the type of decoration line added to the text.
This property can have one or more of the following values:
none- Default value. Displays no decoration lineunderline- The decoration line is displayed under the textoverline- The decoration line is displayed over the textline-through- The decoration line is displayed through the text
Tip: You can combine multiple values, like overline and underline to display lines both over and under a text.
Example
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
Specify a Color for the Decoration Line
The CSS text-decoration-color property is used to set the color of the decoration line.
Example
Add different colors to the decoration line:
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
The text-decoration-style property sets the style of the text decoration (like solid, wavy, dotted, dashed, double).
Tip: Also look at the text-decoration property, which is a short-hand property for text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness.
The text-decoration-thickness property specifies the thickness of the decoration line.