📏 Mastering text-underline-offset in CSS

📌 Introduction

The text-underline-offset property in CSS allows you to adjust the vertical distance between the text and its underline. It is extremely useful when you want more precise control over typography, especially for modern UI, headlines, or link designs. ✨

🧠 What Does text-underline-offset Do?

This property changes how far the underline appears from the baseline of the text. A positive value pushes the underline downward (further away). A negative value (rarely needed) brings it closer or even inside the text.

✨ Syntax

Basic Syntax

text-underline-offset: auto | <length> | <percentage>;

📋 Values Explained

ValueDescription
autoBrowser sets default underline position
lengthCustom spacing (e.g., 2px, 0.1em)
percentageRelative to font size (e.g., 10%)

🧪 Example Usage

1. Basic Custom Offset

Basic Offset

.example {
  text-decoration-line: underline;
  text-underline-offset: 3px;
}
2. Large Offset for Stylish Design

Large Offset

.stylish {
  text-decoration-line: underline;
  text-underline-offset: 8px;
}
3. Using Percentage

Percentage Value

.percentage {
  text-decoration-line: underline;
  text-underline-offset: 15%;
}
4. Combine with Thickness & Color

Full Styling Example

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

This creates a bold, modern underline with extra breathing space — great for headings or call-to-action links. 🔥

⚠️ Important Notes

Note

Note:text-decoration-line: underline is required for this property to work.

Note

Very high offsets can cause the underline to appear too detached — use carefully for readability.

🌟 Real-World Use Cases

  • Modern underline effects on blog links ✍️
  • Cleaner, spaced underlines for titles 📰
  • Accessibility-friendly underline spacing 🔍
  • Premium UI styling for portfolios 🎨

Modern Blog Link Example

a {
  color: #222;
  text-decoration-line: underline;
  text-decoration-color: #0077ff;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
>>“Great typography is all about precision — even the distance of an underline can elevate the entire design.” 🌟

🎉 Conclusion

The text-underline-offset property gives you fine control over underline positioning, helping you create clean, modern, and visually appealing text styles. Use it along with text-decoration-thickness,text-decoration-style, and text-decoration-color for maximum creativity. 🚀