The text-decoration-line CSS property is used to specify the type of decoration to be applied to text. It allows you to add various visual effects to text, such as underlines, overlines, and line-throughs.
The text-decoration-line property accepts one or more values:
-
none: No text decoration is applied. -
underline: Adds an underline below the text. -
overline: Adds a line above the text. -
line-through: Adds a line through the middle of the text. -
initial: Resets the value to its initial default. -
inherit: Inherits the value from its parent element.
Here’s an example:
.decorated-text {
text-decoration-line: underline;
}
In this example, the .decorated-text class sets the text-decoration-line property to underline, which adds an underline below the text.
You can also specify multiple values to apply multiple text decorations simultaneously:
.decorated-text {
text-decoration-line: underline line-through;
}
In this example, the .decorated-text class sets the text-decoration-line property to underline line-through, which adds both an underline and a line-through to the text.
It’s important to note that the text-decoration-line property only affects the appearance of the text decorations and does not impact the color or other styling properties of the text. To control the color of the text decoration, you can use the text-decoration-color property.
The text-decoration-line property is commonly used to add visual cues to text, such as indicating links with underlines or highlighting specific text with line-throughs. It provides flexibility in customizing the appearance of text decorations to achieve desired effects.