text-decoration

Definition

The text-decoration CSS property is a shorthand property that sets the text decoration line, text decoration color, and text decoration style in a single declaration. It’s commonly used to add underlines, overlines, and line-through effects to text. The text-decoration property is essential for creating visual emphasis, links, and decorative text effects.

Syntax

a {
  text-decoration: underline;
}

Values

• none: remove decorations.
• underline / overline / line-through: add lines relative to text baseline.
• Combine multiple values (e.g. underline overline).
• inherit / initial / unset.

Practical Examples

a {
  text-decoration: underline;
}

.nav a {
  text-decoration: none;
}

Use the shorthand to toggle multiple decoration aspects in one declaration.

<div class="flex gap-6">
  <a class="text-sm font-semibold text-sky-600" href="#">Underline</a>
  <a class="text-sm font-semibold text-sky-600 no-underline" style="text-decoration: none;" href="#">No decoration</a>
</div>

Tips & Best Practices

• Use text-decoration for quick toggles, but pair with text-decoration-color/thickness for finer styling.
• Avoid removing link underlines without providing alternative affordances (e.g., color + hover state).

Accessibility & UX Notes

Ensure link styling remains obvious—underlines help color-blind users distinguish links.

Browser Support

Supported widely. Some decoration sub-properties require evergreen browsers.

Related

• text-decoration-line, text-decoration-color, text-decoration-style.
• text-underline-offset for spacing.
• text-decoration-thickness via text-decoration shorthand in modern browsers.