CSS TEXT DECORATION

The CSS text-decoration property is used to add or remove decorative lines on text. 

1.Basic text-decoration 

p {
  text-decoration: underline;
}

This adds a line under the text.

Common Values

Value	Description
none	Removes text decoration
underline	Adds a line below the text
overline	Adds a line above the text
line-through	Adds a line through the text

Example

<p class="underline">Underline</p>
<p class="overline">Overline</p>
<p class="line">Line through</p>
<p class="none">No decoration</p>

.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

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

.none {
  text-decoration: none;
}

2. Text Decoration Color

You can change the color of the decoration.

h2 {
  text-decoration: underline;
  text-decoration-color: red;
}

3. Text Decoration Style

You can change the style of the line.

p {
  text-decoration: underline;
  text-decoration-style: wavy;
}

Common styles:

• solid — normal line
• double — double line
• dotted — dotted line
• dashed — dashed line
• wavy — wavy line

4. Text Decoration Thickness

You can control the thickness of the decoration.

p {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

5. Shorthand Property

All these properties can be written together:

p {
  text-decoration: underline red wavy 2px;
}

This means:

underline + red + wavy + 2px thickness

Important Example: Removing Link Underline

By default, links usually have an underline. You can remove it:

a {
  text-decoration: none;
}

In Short

CSS Text Decoration is used to control lines on text:

text-decoration: underline;
text-decoration-color: red;
text-decoration-style: wavy;
text-decoration-thickness: 2px;

These properties are useful for underlines, overlines, strike-through text, and styling links.