CSS 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
The text-decoration-line property is used to add
a decoration line to text.
Tip: You can combine more than one value, like overline and
underline to display lines both over and under a text.
Example
h1 { text-decoration-line: overline;}
h2 { text-decoration-line: line-through;}
h3 { text-decoration-line: underline;}p { text-decoration-line:
overline underline;}
Try it Yourself »
Note: It is not recommended to underline text that is not a link, as this often confuses the reader.
Specify a Color for the Decoration Line
The text-decoration-color property is used to
set the color of the decoration line.
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;}
Try it Yourself »
Specify a Style for the Decoration Line
The text-decoration-style property is used to
set the style of the decoration line.
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; }
Try it Yourself »
Specify the Thickness for the Decoration Line
The text-decoration-thickness property is used to
set the thickness of the decoration line.
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; }
Try it Yourself »
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;}
Try it Yourself »
A Small Tip
All links in HTML are underlined by default. Sometimes you
see that links are styled with no underline. The text-decoration: none; is used to remove
the underline from links,
like this:
Example
a { text-decoration: none;}
Try it Yourself »
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
★
+1
Reference: https://www.w3schools.com/css/css_text_decoration.asp