Loading lesson path
Overview
Formula
text - decoration property is used to control the appearance of decorative lines on text.It is a shorthand property for the following individual properties:
Formula
text - decoration - line text - decoration - color text - decoration - style text - decoration - thicknessFormula
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 line underline - The decoration line is displayed under the text overline
Formula
- The decoration line is displayed over the text line - throughYou can combine multiple values, like overline and underline to display lines both over and under a text.
Set different types of decoration lines:
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {Formula
text - decoration - line:overline underline;
}It is not recommended to underline text that is not a link, as this often confuses the reader!
Formula
text - decoration - color property is used to set the color of the decoration line.Add different colors to the decoration line:
h1 {
text-decoration-line: overline;Formula
text - decoration - color:red;
}
h2 {
text-decoration-line: line-through;Formula
text - decoration - color:blue;
}
h3 {
text-decoration-line: underline;Formula
text - decoration - color:green;
}
p {Formula
text - decoration - line:overline underline;
text-decoration-color: purple;
}