📌 Introduction

The text-decoration property in CSS is used to apply text decorations such asunderline, overline, line-through, and more — all in a single shorthand property. It allows you to style text links, headings, labels, menu items, and any inline text with one clean, concise declaration. ✨

🎯 Why Use text-decoration?

🧠 What is the text-decoration Shorthand?

The text-decoration property is a shorthand for these individual properties:

Using text-decoration lets you set all of them at once. 🚀

✨ Syntax

text-decoration: line style color thickness;

🧩 Available text-decoration Values

1. Line Options

2. Style Options

3. Color Options

Accepts any valid CSS color: hex, rgb, hsl, named colors, etc.

4. Thickness Options

Accepts lengths (px, em) or percentages.

🔥 Examples

1. Underline Only

p {
  text-decoration: underline;
}

2. Strike-through With Color

.old-price {
  text-decoration: line-through red;
}

3. Fancy Underline Style

.fancy {
  text-decoration: underline wavy #ff5733 3px;
}

4. Overline + Custom Thickness

h1 {
  text-decoration: overline solid 2px;
}

5. Full Modern Link Styling

a {
  color: #222;
  text-decoration: underline dotted #0077ff 2px;
  text-underline-offset: 4px;
}

📊 Comparison Table

🖼️ Visual Example

🎉 Conclusion

The text-decoration property is a powerful shorthand that lets you style text decorations quickly and beautifully. With full control over line, style, color, and thickness, you can create clean, modern, and expressive text styles for your website. Master it and elevate your typography today! 🚀