CSS text-decoration-line Property

What You’ll Learn

The text-decoration-line property chooses which decoration lines appear on text — underline, overline, line-through, or none.

Introduction

The text-decoration-line property in CSS is used to specify what kind of text decoration should be applied to the text.

This property allows you to add underlines, overlines, line-throughs, or a combination of these to your text, giving you greater control over text styling.

Definition and Usage

Use text-decoration-line when you want to control only the line type, then pair it with text-decoration-color and text-decoration-style for full decoration styling.

It is the longhand alternative to setting line types inside the text-decoration shorthand.

📝 Syntax

The syntax for the text-decoration-line property is simple. It can take one or more values to specify the desired text decoration:

element {
  text-decoration-line: value;
}

Basic Example

p.underline {
  text-decoration-line: underline;
}

Syntax Rules

• Use none to remove decoration lines from text or links.
• Line keywords include underline, overline, and line-through.
• You can combine values such as underline overline in supporting browsers.
• Pair with color and style longhands for complete decoration control.

Related Properties

• text-decoration — shorthand for line, style, color, and thickness
• text-decoration-color — sets decoration line color
• text-decoration-style — sets solid, dotted, dashed, or wavy lines
• text-decoration-thickness — sets line thickness

🎯 Default Value

The default value of the text-decoration-line property is none, meaning no text decoration is applied.

💎 Property Values

When to Use text-decoration-line

text-decoration-line is the right choice when you need to control line type separately:

• Links — Add or remove underlines on anchors and buttons.
• Headings — Use overline for decorative title treatments.
• Pricing UI — Apply line-through to old prices.
• Design systems — Split line, color, and style into separate longhand rules.

Examples Gallery

Start with the reference underline example, then try overline headings, sale strike-through, and removing link underlines with none.

<style>
  p.underline {
    text-decoration-line: underline;
  }
</style>

<p class="underline">This text has an underline.</p>

h2.section-title {
  text-decoration-line: overline;
  text-decoration-color: #2563eb;
}

.old-price {
  text-decoration-line: line-through;
  color: #94a3b8;
}

nav a {
  text-decoration-line: none;
  color: #1e40af;
}

nav a:hover {
  text-decoration-line: underline;
}

text-decoration-line in the family

text-decoration-line chooses which lines appear. Combine it with text-decoration-color and text-decoration-style, or use the text-decoration shorthand when you want all parts in one declaration.

.help-link {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #2563eb;
}

💡 Best Practices