CSS

CSS

🎯 CSS text-decoration Property

The text-decoration property in CSS is used to add decorative lines and styling effects to text.

It allows you to underline text, add overlines, create strikethrough effects, and customize line styles and colors.

This property is commonly used for links, headings, highlighted text, and modern UI design effects.

💬 What is text-decoration used for?

The text-decoration property helps make text more visually noticeable and interactive.

  • Underline links
  • Create strikethrough pricing
  • Add stylish text effects
  • Improve typography design

🔹 Basic Usage

CSS

text-decoration: underline;

➡️ This adds a line below the text.

🧩 Syntax

CSS

text-decoration: <line> <style> <color>;

➡️ The property can combine decoration type, line style, and color together.

🔹 1. Decoration Types

Value Description
none No decoration line
underline Adds a line below the text
overline Adds a line above the text
line-through Adds a strikethrough line
initial Resets to default value
inherit Inherits value from parent

Underline Example

HTML

<p style="text-decoration: underline;">
    Underlined text
</p>

Overline Example

HTML

<p style="text-decoration: overline;">
  Overlined text
</p>

Strikethrough Example

HTML

<p style="text-decoration: line-through;">
  Strikethrough text
</p>

🔹 2. Line Styles

Style Description
solid Solid line
dashed Dashed line
dotted Dotted line
double Double line
wavy Wavy line

Dashed Underline

HTML

<p style="text-decoration: underline dashed red;">
  Underlined dashed red line
</p>

Wavy Strikethrough

HTML

<p style="text-decoration: line-through wavy blue;">
  Wavy blue strikethrough
</p>

🔹 3. Decoration Color

HTML

<p style="text-decoration: underline solid green;">
  Underlined green text
</p>

➡️ The decoration line can have custom colors.

💡 Quick Summary

  • underline → adds a line below text
  • overline → adds a line above text
  • line-through → creates strikethrough text
  • Supports different styles and colors

  • 🧠 Summary

  • The text-decoration property is used to decorate text with lines and styling effects.
  • It is widely used for links, buttons, titles, and UI typography effects.
  • Popular usage examples:
  • underline → underline text
  • line-through → create strikethrough effect
  • dashed / dotted / wavy → stylish decoration effects
  • Proper use of text decoration improves visual hierarchy and modern UI appearance.
CSS text-transform
CSS text-decoration-line