text-decoration-inset: Padding for Text Decorations

ByEditor

The text-decoration-inset CSS property addresses a longstanding web issue where text decorations like underlines extend beyond the first and last characters to the content box edges, causing vertical misalignment.

A default blue link zoomed in to the spacing between the text underline and border box, showing that the underline extends all the way to the border box.

This might not bother everyone, but for those who are particular about design (like myself), it can be frustrating.

Despite this, I haven’t actively sought a solution because it hasn’t seemed worth the effort. The best workaround might be using text-decoration: none with ::after and a custom background, though it can be tricky. I prefer leveraging native features like text-decoration-thickness, text-underline-position, and text-underline-offset.

How does text-decoration-inset work? By trimming an underline to align vertically with the text, producing the following result (Firefox 146+ only):

A default blue link zoomed in to the spacing between the text underline and border box, showing that the underline does not extend all the way to the border box.
Post Tags:

Similar Posts