text-decoration
The text-decoration property is used for adding different types of lines to text – underline, overline, or line-through (strikethrough).
One standard decoration line
When you add a standard decoration line, you just specify one keyword – underline, overline, or line-through.
selector{
text-decoration: keyword;
}
Multiple decoration lines
You can also add multiple decoration lines specifying more than one keyword. For example, if you want to add an underline and overline at the same time, add both keywords with a space in between.
selector{
text-decoration: underline overline;
}
Add designs to the decoration line
You can also change the design of the decoration line.
For example:
styles: Use one of the keywords: solid (default), double, dotted, dashed, or wavy.
thickness: Use length units or auto.
color: Use color code or keyword.
You can specify all parameters using one line code like in the example below.
selector{
text-decoration: underline double red 2px;
}
<u> and <s> tag
Underline and strikethrough (line-through) can also be implemented directly by HTML. The <u> tag is used to add an underline. The <s> tag is used to add a strikethrough (line-through).
Practice
Objective:
Set different decoration lines
1. Update the body section of the HTML file
Add the code below at the end of the <body> section in the chapter11.html file.
<h2>Text Decoration</h2>
<h3>Add standard decoration lines</h3>
<p>Text Decoration: Original</p>
<p style="text-decoration: none;">Text Decoration: None</p>
<p style="text-decoration: underline;">Text Decoration: Underliine</p>
<p style="text-decoration: overline;">Text Decoration: Overline</p>
<p style="text-decoration: line-through;">Text Decoration: Line Through (Strikethrough)</p>
<p style="text-decoration: underline overline;">Text Decoration: Underline and Overline</p>
<h3>Add design to the decoration line</h3>
<p style="text-decoration: underline;">Text Decoration: Underline</p>
<p style="text-decoration: underline wavy;">Text Decoration: Underline Wavy</p>
<p style="text-decoration: underline wavy blue;">Text Decoration: Underline Wavy Blue</p>
<p style="text-decoration: underline wavy blue 2px;">Text Decoration: Underline Wavy Blue 2px</p>
<hr>
2. Check the result with a browser
- Open chapter11.html with a browser.
- You can see the different types of text decoration lines.
You can also check the sample result here (Demo Site).
You can also learn this topic offline. Click 
.
More Topics to Explore
Styles in Figma
Labels
flex-grow
