text-decoration-line

Definition

The text-decoration-line CSS property is used to specify the type of decoration to be applied to text. It allows you to add various visual effects to text, such as underlines, overlines, and line-throughs.

The text-decoration-line property accepts one or more values:

• none: No text decoration is applied.
• underline: Adds an underline below the text.
• overline: Adds a line above the text.
• line-through: Adds a line through the middle of the text.
• initial: Resets the value to its initial default.
• inherit: Inherits the value from its parent element.

Here’s an example:

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

In this example, the .decorated-text class sets the text-decoration-line property to underline, which adds an underline below the text.

You can also specify multiple values to apply multiple text decorations simultaneously:

.decorated-text {
  text-decoration-line: underline line-through;
}

In this example, the .decorated-text class sets the text-decoration-line property to underline line-through, which adds both an underline and a line-through to the text.

It’s important to note that the text-decoration-line property only affects the appearance of the text decorations and does not impact the color or other styling properties of the text. To control the color of the text decoration, you can use the text-decoration-color property.

The text-decoration-line property is commonly used to add visual cues to text, such as indicating links with underlines or highlighting specific text with line-throughs. It provides flexibility in customizing the appearance of text decorations to achieve desired effects.

Syntax

.todo {
  text-decoration-line: line-through;
}

Values

• none, underline, overline, line-through, blink (deprecated).
• Combine multiple keywords separated by spaces.

Practical Examples

.todo {
  text-decoration-line: line-through;
}

Toggle specific decoration lines without altering color or style.

<ul class="space-y-2 text-sm text-slate-700">
  <li>Review wireframes</li>
  <li style="text-decoration-line: line-through;">Ship sprint goals</li>
  <li style="text-decoration-line: underline overline; text-decoration-color: #0ea5e9;">Sign off homepage hero</li>
</ul>

Tips & Best Practices

• Use text-decoration-line alongside color and style longhands for full control.
• Avoid blink; it is obsolete and distracting.

Accessibility & UX Notes

Consistent strikethroughs communicate completion, but also pair with color or icons for clarity.

Browser Support

Fully supported in modern browsers.

Related

• text-decoration shorthand.
• text-decoration-style to change line appearance.
• text-decoration-color for contrast tweaks.