0
0
CSSmarkup~5 mins

Text decoration in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Text decoration lets you add lines or styles to text to make it stand out or look different.

To underline links so users know they are clickable.
To strike through text when showing something is deleted or incorrect.
To add overlines or line-throughs for special text effects.
To style headings or important words with lines for emphasis.
To remove default underlines from links for a cleaner look.
Syntax
CSS
selector {
  text-decoration: value;
}

The value can be underline, overline, line-through, none, or a combination.

You can also control the color and style of the decoration with extra properties.

Examples
This underlines all paragraph text.
CSS
p {
  text-decoration: underline;
}
This removes the underline from all links.
CSS
a {
  text-decoration: none;
}
This adds a line above all level 1 headings.
CSS
h1 {
  text-decoration: overline;
}
This strikes through text inside span elements.
CSS
span {
  text-decoration: line-through;
}
Sample Program

This page shows different text decorations: underlined link, link without underline, struck-through text, and overlined text.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Text Decoration Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
    }
    a {
      text-decoration: underline;
      color: blue;
    }
    a.no-underline {
      text-decoration: none;
      color: red;
    }
    .strike {
      text-decoration: line-through;
      color: gray;
    }
    .overline {
      text-decoration: overline;
      color: green;
    }
  </style>
</head>
<body>
  <p>This is a <a href="#">normal link</a> with underline.</p>
  <p>This is a <a href="#" class="no-underline">link without underline</a>.</p>
  <p class="strike">This text is struck through.</p>
  <p class="overline">This text has an overline.</p>
</body>
</html>
OutputSuccess
Important Notes

Text decoration helps users understand meaning or importance of text visually.

Use text-decoration: none; carefully to avoid confusing users about links.

You can combine decorations like underline overline for multiple lines.

Summary

Text decoration adds lines like underline, overline, or line-through to text.

It is useful for links, emphasis, or showing deleted text.

You can control style and color for better design and accessibility.