In CSS, the text-decoration property is used to add or remove decorations to/from text. This includes underlining, overlining, line-through (strikethrough), and the style and color of these decorations. Here’s a detailed guide on how to use the text-decoration property:
Syntax
selector {
text-decoration: value;
}
text-decoration values
1. text-decoration-line: Specifies the kind of text decoration to use (underline, overline, line-through, none).
none: No text decoration.
underline: Adds a line beneath the text.
overline: Adds a line above the text.
line-through: Adds a line through the middle of the text.
underline overline: Adds lines both above and beneath the text.
2. text-decoration-color: Specifies the color of the text decoration.
color: Any valid CSS color value (named colors, HEX, RGB, RGBA, HSL, HSLA).
3. text-decoration-style: Specifies the style of the text decoration.
solid: Default. A solid line.
double: A double line.
dotted: A dotted line.
dashed: A dashed line.
wavy: A wavy line.
4. text-decoration-thickness: Specifies the thickness of the text decoration line (not supported in all browsers).
from-font: The default value. Uses the thickness defined by the font.
length: Any valid length value (e.g., 2px, 0.1em).
Example
Here is an example of a simple HTML page demonstrating various uses of the text-decoration property:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.multiple {
text-decoration: underline overline;
}
.decoration-color {
text-decoration: underline;
text-decoration-color: red;
}
.decoration-style {
text-decoration: underline;
text-decoration-style: wavy;
}
.decoration-thickness {
text-decoration: underline;
text-decoration-thickness: 3px;
}
</style>
</head>
<body>
<p class="underline">This text has an underline.</p>
<p class="overline">This text has an overline.</p>
<p class="line-through">This text has a line through it.</p>
<p class="multiple">This text has both an underline and an overline.</p>
<p class="decoration-color">This text has an underline with a red color.</p>
<p class="decoration-style">This text has a wavy underline.</p>
<p class="decoration-thickness">This text has a thick underline.</p>
</body>
</html>