How to Set Text-Decoration in CSS: Simple Guide

Use the text-decoration CSS property to add lines like underline, overline, or line-through to text. You can set it by writing text-decoration: underline; or combine multiple styles like text-decoration: underline line-through;.

Syntax

The text-decoration property controls lines on text such as underlines, overlines, and strike-throughs. You can set one or more values separated by spaces.

• none: no line
• underline: line below the text
• overline: line above the text
• line-through: line through the text
• blink: blinking text (rarely supported)

You can also specify the color and style of the line with text-decoration-color and text-decoration-style.

css

text-decoration: none | underline | overline | line-through | blink | initial | inherit;

/* Example combining multiple values */
text-decoration: underline line-through;

Example

This example shows how to underline text and add a line-through at the same time. The text will have both lines visible.

css

html {
  font-family: Arial, sans-serif;
}

.underline {
  text-decoration: underline;
}

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

.combined {
  text-decoration: underline line-through;
  color: #2a7ae2;
  font-size: 1.2rem;
}

Output

<p class="underline">This text is underlined.</p>
<p class="line-through">This text has a line through it.</p>
<p class="combined">This text is underlined and has a line through it.</p>

Common Pitfalls

One common mistake is using text-decoration with incorrect values or forgetting that it can accept multiple values. Also, some browsers may not support the blink value.

Another pitfall is trying to style the line color or style directly inside text-decoration without using the separate properties text-decoration-color and text-decoration-style.

css

/* Wrong: trying to set color inside text-decoration */
p { text-decoration: underline red; } /* This won't work as expected */

/* Right: use separate properties */
p {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Quick Reference

Value	Description
none	No line decoration
underline	Line below the text
overline	Line above the text
line-through	Line through the text
blink	Blinking text (rarely supported)
text-decoration-color	Sets the color of the line
text-decoration-style	Sets the style of the line (solid, wavy, dotted, dashed)

Key Takeaways

Use text-decoration to add lines like underline or line-through to text.

You can combine multiple decorations by listing them separated by spaces.

To change line color or style, use text-decoration-color and text-decoration-style.

Avoid unsupported values like blink as they may not work in modern browsers.

Remember text-decoration: none; removes all text decorations.