Text Decoration
The text-decoration property is used to add or remove decorative lines from text.
Common values include underline, overline, line-through, and none.
How Text Decoration Works
Example 1: Underline
The underline value adds a line below the text.
CSS Code
p {
text-decoration: underline;
}Output
This text is underlined.
Example 2: Overline
The overline value adds a line above the text.
CSS Code
p {
text-decoration: overline;
}Output
This text has an overline.
Example 3: Line Through
The line-through value draws a line through the text.
CSS Code
p {
text-decoration: line-through;
}Output
This text has a line through it.
Example 4: Remove Decoration
The none value removes text decoration.
CSS Code
a {
text-decoration: none;
}Output
Example 5: Colored Underline
You can also specify the decoration color using text-decoration-color.
CSS Code
p {
text-decoration-line: underline;
text-decoration-color: red;
}Output
Red Underlined Text
Common Text Decoration Values
| Value | Effect |
|---|---|
underline
|
Adds a line below the text |
overline
|
Adds a line above the text |
line-through
|
Draws a line through the text |
none
|
Removes text decoration |
Simple Explanation
underline → Adds a line below the text.
overline → Adds a line above the text.
line-through → Draws a line through the text.
none → Removes the text decoration.
Summary
The text-decoration property controls
decorative lines on text. Common values are
underline, overline,
line-through, and none.