CSS Text Decoration, underline, overline, line-through with Examples

Text Decoration

In CSS, the text-decoration property is used to add or remove decorative lines on text, such as underlines, overlines, or strikethroughs. It enhances the visual appearance and can also indicate interactivity (e.g., underlined links).

What is text-decoration ?

The text-decoration property controls the line styling applied to text, including:

The type of line (underline, overline, line-through)

The style (solid, dashed, etc.)

The color and thickness

This property works with inline and inline-block elements like <a>, <span> , and <p>

Common Values of text-decoration

Value	Description
none	Removes all text decoration (default for most elements).
underline	Draws a line below the text.
overline	Draws a line above the text.
line-through	Draws a line through the text (strikethrough).
blink	Makes text blink (deprecated & not widely supported).

Syntax:

selector {
  text-decoration: [line] [style] [color] [thickness];
}

You can specify multiple components like:
text-decoration: underline dashed blue 2pt;

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .overline {
      text-decoration: overline solid red 5px;
    }
    .line-through {
      text-decoration: line-through solid green 1px;
    }
    .underline {
      text-decoration: underline dashed 2pt blue;
    }
  </style>
</head>
<body>
  <h2>Text Decoration using CSS</h2>

  <p class="overline">Overline text decoration.</p>
  <p class="line-through">Line-through text decoration.</p>
  <p class="underline">Underline text decoration.</p>
</body>
</html>

Output:

Key Point

Use text-decoration: none; to remove underlines from links.

You can customize decoration thickness, color, and style.

Avoid using blink as it’s deprecated and not supported in modern browsers.

Combine with text-decoration-thickness, text-decoration-color, and text-decoration-style for advanced styling.