Runnable CSS Docs: Underline

Q: How do I underline text in CSS?

Use text-decoration: underline; on the element. For the line's look, add text-decoration-color, text-decoration-style, text-decoration-thickness and text-underline-offset.

Q: How do I remove the underline from a link?

Set text-decoration: none; on the a element. Make sure links still stand out another way (color plus an underline on hover or focus), because many readers rely on the underline to spot links.

Q: How do I change the underline color?

Use text-decoration-color, or the shorthand: text-decoration: underline #f59e0b;. Without it, the line uses the text color.

Q: How do I add space between the text and the underline?

Use text-underline-offset, for example text-underline-offset: 4px;. Larger values move the line further below the text.

How to underline text in CSS

text-decoration: underline draws a line under text. The line takes the text color unless you give it one.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

The second line uses the text-decoration shorthand for the line type, style and color, then sets the thickness and offset with their own properties. The specification also allows the thickness inside the shorthand, but Safari drops the whole declaration when you include it, so write text-decoration-thickness separately.

The text-decoration properties

Property	Values	Default
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (can combine)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	Any color	`currentColor` (the text color)
`text-decoration-thickness`	A length, a percentage, `auto`, `from-font`	`auto`
`text-underline-offset`	A length, a percentage, `auto`	`auto`

text-decoration is the shorthand for the first four, but keep the thickness out of it: Safari ignores a text-decoration declaration that contains one. text-underline-offset is separate and has to be written on its own.

Styles, colors and thickness

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

Moving the underline: text-underline-offset

By default the line sits close to the letters and skips around descenders such as g, p and y. text-underline-offset pushes it further down, which often reads cleaner on headings and links:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

The gaps around the descenders come from text-decoration-skip-ink: auto, which is on by default. Set it to none for a continuous line.

Removing the underline from links

Links are underlined by the browser's stylesheet. text-decoration: none removes it. Because many readers find links by their underline, bring it back on hover and keyboard focus, and give the link a color that differs from the text:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

Navigation bars and buttons are a fair place to drop the underline, because their position already says "link". Inside a paragraph of text, keep it. More on link states is on the hover page.

Overline and line-through

text-decoration-line also draws a line above the text or through it, and accepts more than one value:

.old-price { text-decoration: line-through; }
.both      { text-decoration-line: underline overline; }

Strikethrough through CSS is visual only. When the text is deleted content (a changed price, a removed item), mark it up with <s> or <del>, as the HTML underline page shows, so the meaning is in the markup and not only in the styling.

Common mistakes

Using <u> to underline for style. <u> is for text marked as different, such as misspellings. For a styled underline, use CSS.
Underlining text that is not a link. Readers will try to click it. Use bold, color or a background for emphasis instead.
Removing link underlines in body text without another cue. Color alone is not enough for readers who cannot see the difference.
Trying to remove a parent's underline from a child. It cannot be undone from inside; change the parent or make the child inline-block.
Expecting text-underline-offset in the shorthand. It is its own property.
Putting the thickness in the shorthand. text-decoration: underline 2px works in Chrome and Firefox, but Safari drops the whole declaration. Use text-decoration-thickness.

Frequently Asked Questions

How do I underline text in CSS?

Use text-decoration: underline; on the element. For the line's look, add text-decoration-color, text-decoration-style, text-decoration-thickness and text-underline-offset.

How do I remove the underline from a link?

Set text-decoration: none; on the a element. Make sure links still stand out another way (color plus an underline on hover or focus), because many readers rely on the underline to spot links.

How do I change the underline color?

Use text-decoration-color, or the shorthand: text-decoration: underline #f59e0b;. Without it, the line uses the text color.

How do I add space between the text and the underline?

Use text-underline-offset, for example text-underline-offset: 4px;. Larger values move the line further below the text.

Why can't I remove the underline from a child element?

An underline drawn by a parent is painted across its children and cannot be removed from inside them. Remove it on the element that sets it, or make the child display: inline-block, which the parent's decoration does not reach.

Related concepts