text-decoration-inset is Like Padding for Text Decorations

The text-decoration-inset

The text-decoration-inset CSS property addresses a persistent issue in web design – text decorations like underlines extending beyond the first and last characters of text, leading to misalignment. This property, currently supported in Firefox 146+, allows for clipping of the decoration from the ends.

Why This Matters

For years, developers have relied on workarounds like pseudo-elements (::after) to achieve correctly aligned underlines, a solution that can be complex and inflexible. Native text decoration features offer advantages like responsiveness to text-decoration-thickness and text-underline-position, but were previously hampered by this alignment issue which drove the need for less maintainable solutions. The cost of imperfection negatively impacts design polish and attention to detail.

Key Insights

• Firefox 146+ Support: The property is currently implemented in Firefox version 146 and later.
• Length-Based Values: text-decoration-inset utilizes <length> values, ideally using em units for scalability with font size.
• Animation Potential: Transitioning or animating text-decoration-inset creates native animated underlines, avoiding reliance on less efficient pseudo-element techniques.

Working Example

a {
  transition: 300ms;
  text-decoration-inset: 0.046em 0.009em;
}

a:hover {
  text-decoration-inset: calc(0.046em * 10);
}

Practical Applications

• Typography Focused Sites: News outlets or blogs can precisely control underline placement to create a cleaner, more professional look.
• Pitfall: Using absolute pixel values for text-decoration-inset can break when font sizes change, leading to misaligned decorations, making em the preferred unit.

References:

• https://css-tricks.com/text-decoration-inset-is-like-padding-for-text-decorations/