CSS Text Decoration
The text-decoration property controls the decorative lines on text.
It is a shorthand for these properties: text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness.
Add a Decoration Line to Text
The text-decoration-line property sets the type of line added to the text. It can take one or more of these values:
none— the default, no line.underline— a line under the text.overline— a line over the text.line-through— a line through the text.
Tip: You can combine values, like overline underline, to show lines both over and under the text.
Note: It is best not to underline text that is not a link, as it can confuse the reader.
Example
Each element shows a different decoration line, and the paragraph combines two.
Prompt
An HTML page that shows the text-decoration-line property.
In an internal
<style> block, give the <h1> an overline, the <h2> a line-through, the <h3> an underline, and the <p> both overline and underline. Add a heading of each level and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
</style>
</head>
<body>
<h1>Overline heading</h1>
<h2>Line-through heading</h2>
<h3>Underline heading</h3>
<p>This paragraph has a line over and under it.</p>
</body>
</html>
Specify a Color for the Decoration Line
The text-decoration-color property sets the color of the decoration line.
Example
The decoration lines are given different colors with text-decoration-color.
Prompt
An HTML page that shows the text-decoration-color property.
In an internal
<style> block, give the <h1> a red overline, the <h2> a blue line-through, the <h3> a green underline, and the <p> a purple overline and underline, using text-decoration-line and text-decoration-color together. Add a heading of each level and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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;
}
</style>
</head>
<body>
<h1>Red overline heading</h1>
<h2>Blue line-through heading</h2>
<h3>Green underline heading</h3>
<p>This paragraph has purple lines over and under it.</p>
</body>
</html>