✨ CSS text-decoration — Styling Lines on Text

The text-decoration property is used to add visual decorations like underlines, overlines, line-throughs, and blinking effects to text content on web pages.

It’s often used for links, headings, buttons, and emphasis.

---

🔹 What Does text-decoration Do?

It allows you to draw lines across, under, or above text, making it more expressive, noticeable, or readable.

---

📘 Syntax

selector {
  text-decoration: none | underline | overline | line-through | blink | combination;
}

You can also use shorthand or individual sub-properties for more control (covered below).

---

💡 Common Values

Value	Description
none	Removes all text decorations
underline	Draws a line below the text
overline	Draws a line above the text
line-through	Draws a line through the middle
blink	Text blinks (unsupported in most browsers)

---

✍️ Example: Underlining a Link

<a href="#" class="styled-link">Visit site</a>

.styled-link {
  text-decoration: underline;
}

---

❌ Removing Underlines from Links

a {
  text-decoration: none;
}

Perfect for custom-styled navigation or buttons.

---

🖼️ Image Idea: Visualizing Text Decorations

Image Description:
A list of words, each with one of the following applied:

• No decoration
• Underlined
• Overlined
• Strikethrough (line-through)
• All three at once

🎯 Purpose: Show how text-decoration visually affects text lines.

---

🔧 Advanced Usage (Shorthand and Sub-properties)

CSS lets you break down text-decoration into sub-properties for more control:

.selector {
  text-decoration-line: underline line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

Shorthand version:

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

---

🧠 Browser Compatibility

• ✅ Most modern browsers support all values except blink.
• text-decoration-thickness and text-decoration-style are supported in modern browsers (Chrome, Edge, Firefox, Safari).

---

✅ Best Use Cases

Goal	Recommended Value(s)
Remove underline from links	text-decoration: none
Add emphasis to headers	overline, underline
Indicate deleted/removed text	line-through
Custom link hover effects	Combine underline with color/style

---

🎨 Style Tips

• Use wavy or dotted styles for a creative or editorial look:cssКопироватьРедактироватьp.error { text-decoration: underline red wavy; }
• Use hover or focus to add visual feedback:cssКопироватьРедактироватьa:hover { text-decoration: underline; }

---

✅ Summary

Property	Description
text-decoration	Shorthand for all decoration styles
text-decoration-line	Controls type: underline, overline, etc.
text-decoration-color	Color of the line
text-decoration-style	Solid, dotted, wavy, double, dashed
text-decoration-thickness	Controls line thickness