text-decoration
Adds or removes lines next to text: underline, strikethrough, overline.
- Initial value
none currentcolor solid auto- Inherited
- No
- Animatable
- color and thickness
- Applies to
- all elements
- JavaScript
element.style.textDecoration = "underline"
Example
#.link {
text-decoration: underline;
text-decoration-color: #a78bfa;
text-underline-offset: 4px;
}
.old-price {
text-decoration: line-through;
}<p style="margin: 0 0 8px"><a class="link" href="#" style="color: #fff; text-decoration: underline; text-decoration-color: #a78bfa; text-underline-offset: 4px;">See pricing</a></p>
<p style="margin: 0"><span class="old-price" style="text-decoration: line-through; color: #737373;">$49</span> <strong>$29</strong></p>Definition and usage
#The text-decoration property is shorthand for text-decoration-line (the kind of line), text-decoration-style (style), text-decoration-color (color), and text-decoration-thickness (thickness). So you can write, for example, underline wavy #f43f5e.
It’s most often used for links: text-decoration: none removes the default underline, and you can bring it back in :hover. line-through, meanwhile, strikes through text, for example an old price or a completed task.
You set the gap between the underline and the text with the separate text-underline-offset property, which lets you create elegant underlines that don’t touch the letters.
Syntax
#text-decoration: <line type> || <style> || <color> || <thickness>;Values
#- Text with no lines at all.
- A line under the text, like in links.
- A line through the middle of the text.
- A line above the text.
- A wavy, colored line, like a spelling-error squiggle.
- A thick, colored line.
Values in practice
#none
.demo { text-decoration: none; }underline
.demo { text-decoration: underline; }line-through
.demo { text-decoration: line-through; }overline
.demo { text-decoration: overline; }underline wavy #f43f5e
.demo { text-decoration: underline wavy #f43f5e; }underline 3px #a78bfa
.demo { text-decoration: underline 3px #a78bfa; text-underline-offset: 4px; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Don’t remove the underline from links in running text. For many people, it’s the main signal that something is clickable.
text-underline-offsetmoves the underline away from the letters, so it doesn’t cut through descenders like in g, j, or y.
Related entries
#Spotted a mistake or missing an example? Write to us.