CSS Tutorial: text-decoration-line ✨

Introduction to text-decoration-line in CSS 🖍️

The text-decoration-line property in CSS specifies what kind of decorative line should be applied to text. It allows you to add effects like underline, overline, or line-through, and is commonly used for styling links, headings, labels, and highlighted text. This gives your UI more control and precision over its typography! 🔥

Why Use text-decoration-line? 🤔

  • To style links with custom underline effects 🔗
  • To strike out deprecated or incorrect content ❌
  • To highlight text with overlines or multiple lines ✨
  • To create custom visual effects in headings 🎨

Syntax 📌

Basic Syntax

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

Note

You can apply multiple values at once, such as underline overline. The blink value is deprecated and should not be used.

Available Values 🧩

1. none

Removes all text decorations.

2. underline ⬇️

Draws a line below the text. Commonly used for links.

3. overline ⬆️

Draws a line above the text.

4. line-through ➖

Strikes through the text. Used for showing deleted or discounted prices.

5. multiple values ✨

You can combine decorations like: underline overline.

Examples 🔥

1. Underlined Link

Underline example

a {
  text-decoration-line: underline;
}

2. Line-Through Text (e.g., Old Price) 🏷️

Line-through example

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

3. Overline Effect

Overline example

h1 {
  text-decoration-line: overline;
}

4. Combining Underline + Overline ✨

Multiple lines

h2 {
  text-decoration-line: underline overline;
}

Comparison Table 📚

ValueDescription
noneNo decoration applied
underlineDraws a line under the text
overlineDraws a line above the text
line-throughStrike-through the text
underline overlineApplies both top and bottom lines

Visual Example 🖼️

Further details can be found at: https://dummyimage.com/800x220/eeeeee/000000&text=underline+|+overline+|+line-through

>>“Typography is the art of delight — even a single line can change how we read.” ✨

Conclusion 🎉

The text-decoration-line property gives you full control over text decoration styles. From underlines to strike-throughs and combined effects, you can style text with precision and creativity. Pair it with text-decoration-color andtext-decoration-style for even more beautiful designs! 🚀