🖋️ Mastering text-decoration-thickness in CSS

📌 Introduction

The text-decoration-thickness property in CSS allows you to control how thick the text decoration line appears — whether it's an underline, overline, or line-through. This gives you more precise typographic control and helps create modern, aesthetically pleasing text designs. 🎨

🧠 What Does text-decoration-thickness Do?

In simple terms, it adjusts the weight (thickness) of the decoration line. You can make the line ultra-thin, bold, or match the thickness of the font itself.

✨ Syntax

Basic Syntax

text-decoration-thickness: auto | from-font | <length> | <percentage>;

📋 Available Values

ValueDescription
autoBrowser chooses thickness (default)
from-fontUses the font’s designed underline thickness
lengthCustom numeric value (e.g., 2px, 0.2em)
percentageThickness relative to font size

🧪 Example Usage

1. Thin Underline

Thin Underline

.thin {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}
2. Thick Underline

Thick Underline

.thick {
  text-decoration-line: underline;
  text-decoration-thickness: 4px;
}
3. Percentage-Based Thickness

Percentage Thickness

.percentage {
  text-decoration-line: underline;
  text-decoration-thickness: 10%;
}
4. Using from-font

Font-Based Thickness

.from-font {
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
}

🎨 Combining Thickness, Color & Style

Styled Underline

.fancy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #ff4d4d;
  text-decoration-thickness: 3px;
}

This produces a thick, wavy, eye-catching underline — perfect for modern UI designs. 🔥

⚠️ Important Notes

Note

Note:text-decoration-line must be used, or the thickness will not appear.

Note

Some thickness values may render differently depending on fonts and browsers.

🌟 Real-World Use Cases

  • Blog link styling for a premium look ✍️
  • Highlighting key terms in documentation 📘
  • Interactive menu designs on websites 🧭
  • Brand-specific decorative text elements 🎨

Modern Blog Link Example

a {
  color: #2c2c2c;
  text-decoration-line: underline;
  text-decoration-color: #0077ff;
  text-decoration-thickness: 2px;
  text-decoration-style: solid;
}
>>“Typography is the voice of your brand — even a simple underline can speak with personality.” 💙

🎉 Conclusion

The text-decoration-thickness property offers fine control over text decoration, enabling designers to create stylish, readable, and modern interfaces. Pair it with text-decoration-line, text-decoration-style, andtext-decoration-color for full creative power. 🚀