CSS text-decoration Explained — Underline, Color, Thickness & Style

The CSS text-decoration property is one of those tools every front-end developer uses all the time without really exploring what it can do. Most people know it as "the thing that adds an underline to links", but it actually offers fine-grained control over lines, colors, styles, thickness, and offset — enough to build elegant hover effects without ever touching JavaScript.

In this post, we'll walk through every part of text-decoration, look at how the modern long-hand properties work, and end with a couple of practical recipes you can drop into your project today.

The Shorthand: text-decoration

text-decoration is a shorthand that combines four longhand properties:

• text-decoration-line — what kind of line
• text-decoration-style — solid, dashed, wavy, etc.
• text-decoration-color — the color of the line
• text-decoration-thickness — how thick the line is

/* Shorthand */
a {
  text-decoration: underline wavy #4f46e5 2px;
}

1. text-decoration-line

This decides what kind of line is drawn. Values can be combined.

.none      { text-decoration-line: none; }          /* removes underlines */
.under     { text-decoration-line: underline; }
.over      { text-decoration-line: overline; }
.through   { text-decoration-line: line-through; }
.combo     { text-decoration-line: underline overline; }

2. text-decoration-style

Five flavors — pick whatever matches the brand.

.s1 { text-decoration: underline solid; }
.s2 { text-decoration: underline double; }
.s3 { text-decoration: underline dotted; }
.s4 { text-decoration: underline dashed; }
.s5 { text-decoration: underline wavy; }

Wavy is especially handy for spell-check style highlights or playful headings.

3. text-decoration-color

By default, the underline inherits the text color. Override it independently for that "highlighter" effect:

a {
  color: #0f172a;
  text-decoration: underline;
  text-decoration-color: #f59e0b;  /* warm amber line */
}

4. text-decoration-thickness and text-underline-offset

These two modern properties (great browser support since 2021) let you fine-tune how the underline looks. Use them together for elegant, breathable underlines.

a {
  text-decoration: underline;
  text-decoration-color: #4f46e5;
  text-decoration-thickness: 2px;   /* line thickness */
  text-underline-offset: 4px;       /* gap between text & line */
}

Thickness accepts auto, from-font, lengths (2px), or percentages. Offset accepts the same.

Practical Recipe: A Clean Animated Underline on Hover

Here's a polished hover effect using text-decoration long-hands — no pseudo-elements needed.

a.fancy {
  color: #0f172a;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition:
    text-decoration-color .25s ease,
    text-underline-offset .25s ease;
}

a.fancy:hover {
  text-decoration-color: #4f46e5;
  text-underline-offset: 6px;
}

Removing Underlines the Right Way

For navigation menus, buttons, and logos, you'll want to remove the default link underline. Always pair it with a clear focus style for keyboard users.

nav a {
  text-decoration: none;
}

nav a:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 4px;
}

Quick Browser Support Note

The four longhands (line, style, color, thickness) and text-underline-offset are supported in every modern browser. If you need to support very old Safari, the shorthand still falls back gracefully.

Wrapping Up

The text-decoration property has come a long way from its plain underline origins. Knowing the four longhands gives you everything you need to build refined typography — branded link colors, accessible hover states, and tasteful animated underlines — entirely in CSS.

Keep Learning

Want to go deeper? Explore the related learning roadmaps below.