Text Decoration
Text Decoration
In this chapter you will learn about the following properties:
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
- text-decoration
Add a Decoration Line to Text
Text can have a decoration line added to it by using the text-decoration-line property.
Advice: To show lines above and below a text, mix multiple values, such as underline and overline.
Example
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
Note: Underlining material that isn’t a link isn’t advised because it can confuse readers.
Specify a Color for the Decoration Line
The decoration line’s color can be adjusted using the text-decoration-color property.
Example
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
Specify a Style for the Decoration Line
The style of the decoration line can be adjusted using the text-decoration-style property.
Example
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
Specify the Thickness for the Decoration Line
The decoration line’s thickness can be adjusted using the text-decoration-thickness property.
Example
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
The Shorthand Property
The text-decoration property is a shorthand property for:
- text-decoration-line (required)
- text-decoration-color (optional)
- text-decoration-style (optional)
- text-decoration-thickness (optional)
Example
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}
A Small Tip
In HTML, all links are automatically underlined. There are instances when links are formatted without an underline. You can use text-decoration: none; to make links like this one without an underline:
Example
a {
text-decoration: none;
}
All CSS text-decoration Properties
| Property | Description |
|---|---|
| text-decoration | Sets all the text-decoration properties in one declaration |
| text-decoration-color | Specifies the color of the text-decoration |
| text-decoration-line | Specifies the kind of text decoration to be used (underline, overline, etc.) |
| text-decoration-style | Specifies the style of the text decoration (solid, dotted, etc.) |
| text-decoration-thickness | Specifies the thickness of the text decoration line |
