CSS Text Decoration
The text-decoration property adds or removes lines such as underlines, overlines, and strikethroughs on text.
The <text-decoration> property draws lines through or around text. It is most often used to remove the default underline from links, or to add emphasis to specific words.
Common line values
- none removes any decoration, commonly used on links.
- underline draws a line below the text.
- overline draws a line above the text.
- line-through draws a line through the middle of the text.
Removing the link underline
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">Learn more</a>
</body>
</html>The full shorthand
text-decoration is a shorthand that can also set the line's style and color, letting you create effects like a wavy colored underline.
A styled underline
<!DOCTYPE html>
<html>
<head>
<style>
.misspelled {
text-decoration: underline wavy #cc0000;
}
</style>
</head>
<body>
<p>The word <span class="misspelled">seperate</span> is often misspelled.</p>
</body>
</html>Note: When you remove underlines from links, make sure they are still distinguishable by color or another cue so users can tell they are clickable.
