text-decoration in CSS: styling an underline without faking it with a border

An underlined link, a struck-through price during a sale, a word emphasized with a line above it: these three text decorations look basic, yet each one long required workarounds in CSS before text-decoration became complete enough to do without them.

Today, this property is no longer limited to switching an underline on or off. It lets you choose its color, thickness, and style, which removes the need for the once very common detour through a border repurposed for something it was never meant to do.

Definition

text-decoration adds a decorative line to text: underline, strikethrough, an overline, or none at all. It is actually a shorthand property that bundles several distinct sub-properties together.

a {
  text-decoration: underline;
}

.struck-price {
  text-decoration: line-through;
}

a.plain {
  text-decoration: none;
}

The sub-properties behind the shorthand

Each of these sub-properties can be set independently, or combined into the text-decoration shorthand written on a single line.

A concrete example: a styled underline

Before text-decoration-color and text-decoration-thickness arrived, styling an underline meant removing text-decoration and faking the line with a bottom border or a gradient background, a technique that worked but repurposed properties designed for something else entirely.

a {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

The value currentColor is worth knowing here: it makes the underline automatically match the text color, with no need to duplicate it, and it follows any color change, for example on :hover, without an extra line of CSS.

The trap of an underline that runs through everything

On a link containing several words with spaces, text-decoration: underline; underlines the entire span, spaces included, which can look continuous and clean. But as soon as a link contains an element with a different height, like an icon or a badge, the default stroke sometimes cuts through it awkwardly, without respecting the natural gaps of letters that dip below the baseline, like g or p.

Best practices

For a styled link, always prefer the text-decoration-color and text-decoration-thickness sub-properties over a repurposed border: the result correctly follows letters that dip below the baseline, remains semantically an underline for assistive technology, and gets cleanly removed with text-decoration: none; when needed, without having to cancel a border defined somewhere else in the code.

Frequently asked questions

The underline is the most universally recognized visual cue for a clickable link, especially for visitors who struggle to distinguish colors and cannot rely solely on differently colored text. Removing it entirely, with no other clear visual signal, makes links harder to spot inside a block of text.

The wavy stroke from text-decoration-style stays attached to the text, following its natural underline position and thickness, while a wavy border requires manually recreating the spacing under the text. It is also the style browsers use by default to flag an underlined spelling mistake.

Yes, it applies to any element that displays text, not only links. That is what makes it possible, for example, to strike through a sale price with text-decoration: line-through; on a plain formatting tag.

Yes, text-decoration-line accepts several space-separated values, for example underline overline to show a line both above and below the text. It is a rare use case, but useful for certain specific typographic frames.