✍️ CSS text-decoration-line — Drawing Lines on Text Content

The text-decoration-line property specifies what kind of decorative line you want to add to your text: underline, overline, line-through (strikethrough), or any combination of these.

It’s a part of the text-decoration shorthand, but you can use it on its own for fine-tuned styling.

---

🔹 What Does text-decoration-line Do?

It controls where the line appears relative to the text:

• underline — below the text
• overline — above the text
• line-through — across the text (strikethrough)

---

📘 Syntax

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

---

💡 Values Explained

Value	Description
none	No decoration at all
underline	Line below the text
overline	Line above the text
line-through	Line through the middle (like “crossed out”)
Combination	You can combine multiple (e.g., underline overline)

---

✍️ Example: Underlined and Struck-Through Text

<p class="multi-line">This text has multiple decorations.</p>

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

✅ Result: The text will have both an underline and a strikethrough.

---

🖼️ Image Idea: Visual Display of Each Decoration

Image Description:
Show the same word three times:

• One with underline
• One with overline
• One with line-through
• And a fourth with all three combined

🎯 Purpose: Help visually distinguish the placement and combination of lines.

---

🎨 Combine with Other Decoration Properties

You can pair text-decoration-line with:

• text-decoration-color — to change line color
• text-decoration-style — to use wavy, dashed, double lines, etc.
• text-decoration-thickness — to adjust the line’s width

Example:

.decorated {
  text-decoration-line: underline;
  text-decoration-color: crimson;
  text-decoration-style: dashed;
  text-decoration-thickness: 2px;
}

---

✅ Best Use Cases

Use Case	Recommended Line
Hyperlinks	underline
Old prices or deleted items	line-through
Highlight headings subtly	overline
Visual emphasis	Combine underline overline

---

🔄 Browser Support

• ✅ Widely supported across all modern browsers
• ⚠️ Older browsers may not support combination values or custom styles

---

🧠 Accessibility Tip

Use text-decoration-line alongside text-decoration-color and text-decoration-thickness for better visibility and accessibility, especially for users with visual impairments.

---

✅ Summary

Property	text-decoration-line
Purpose	Draw lines on, above, or below text
Typical values	underline, overline, line-through
Can combine multiple	Yes
Works with	text-decoration-color, style, thickness

---