CSS Text Decoration

[Guest]

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