The CSS text-decoration property
The CSS text-decoration property adds lines to text — underline, line-through, overline — or removes them with none. It is a shorthand that also sets the line's color, style and thickness. The most common use is text-decoration: none to strip the underline from a link, though removing it has accessibility implications.
Overview
text-decoration draws lines on text. The familiar one is the link underline, but it also handles line-through for struck-out prices and edits, and overline for the occasional flourish. none removes any line, which is how most "make my links look like buttons" styling begins.
It grew into a shorthand, so a single declaration can set the line type, its color, its style and its thickness: text-decoration: underline wavy #e11d48 2px gives you a thick red wavy underline. The individual longhands — text-decoration-color, text-decoration-style, text-decoration-thickness and the spacing control text-underline-offset — let you craft underlines that sit nicely under descenders instead of cutting through them.
Tasteful underline styling is one of the easiest wins in modern CSS. A slightly offset, slightly thinner underline in the link color looks far more refined than the browser default — just be careful about removing underlines entirely, for the reason below.
Syntax
selector {
text-decoration: line color style thickness;
}
/* a refined link underline */
a {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}Values
The text-decoration property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
none |
No line. The usual way to remove a link underline. |
underline |
A line under the text. |
line-through |
A line through the text (strikethrough). |
overline |
A line above the text. |
color, style, thickness |
The shorthand also sets the line color, style (solid, wavy, dashed) and thickness. |
Example
<style>
p { margin: 0 0 8px; font: 16px system-ui, sans-serif; }
a { color: #1c7ce9; }
.fancy { text-decoration: underline; text-decoration-color: #93c5fd; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.struck { text-decoration: line-through; color: #94a3b8; }
</style>
<p>A normal <a href="#">link with an underline</a>.</p>
<p>A <a href="#" class="fancy">refined underline</a> with offset and color.</p>
<p class="struck">Was £49 — now reduced.</p>Best practices
- Keep an underline (or another clear cue) on links inside body text so readers can tell them apart from ordinary words.
- Refine underlines with
text-underline-offsetandtext-decoration-thicknessinstead of removing them — it looks better and stays usable. - Use
line-throughfor struck prices and edits, but reinforce the meaning with text or markup such as<del>for assistive tech. - If you remove underlines from navigation links, make the link styling unmistakable in some other way (weight, color plus context).
Accessibility
Underlines are the most recognized signal that text is a link, so removing them from links within a paragraph is a real accessibility concern. WCAG warns against using color as the only way to distinguish a link — and a color-only link with no underline does exactly that, leaving color-blind readers unable to spot it. Keep the underline, or add another unmistakable cue.
Navigation and buttons, where context already makes the role obvious, are a reasonable exception. But for links embedded in running text, the underline is doing accessibility work — refine it rather than delete it.
Frequently asked questions
How do I remove the underline from a link in CSS?
text-decoration: none on the link. Be aware this removes the main visual cue that the text is a link, so keep another clear signal if the link sits within body text.How do I add a strikethrough in CSS?
text-decoration: line-through. For meaningful deletions, also use the <del> or <s> element so the change is conveyed to assistive technology.How do I style a link underline?
text-decoration-color, text-decoration-thickness and text-underline-offset let you set the color, weight and distance for a cleaner underline.