I recently had a client—a high-end boutique owner—who was absolutely obsessed with typography. We’re talking “pixel-perfect” in the most literal sense. They sent me a screenshot of their new landing page and pointed out that the link underlines were extending just a tiny bit past the vertical stems of the letters. It was maybe a 2px misalignment, but to them, it was a “total mess.”
Honestly, my first thought was to just kill the native underline and use a pseudo-element. I’ve done it a thousand times: text-decoration: none and then an ::after with a custom background. It worked, but then the client changed the font size on mobile, and the pseudo-element started drifting. Then they added a second line of text, and the whole thing collapsed because pseudo-elements don’t play nice with line-breaks in a native way. It was a total nightmare to maintain across a whole WooCommerce shop.
The Better Way: Using text-decoration-inset
The real solution to this problem is a relatively new CSS property called text-decoration-inset. Think of it as padding, but specifically for your text decorations. It allows you to clip the underline from the left or right side without resorting to hacky spans or absolute positioning. It’s a game-changer for anyone who cares about “vertical misalignment,” a concept I saw explained really well over at css-tricks.com.
The syntax is straightforward. You define a left and a right inset value. I always recommend using em units here so the effect scales with your font size. Trust me on this—hardcoding pixels in a responsive WordPress theme is just asking for a headache later.
/* bbioon-custom-link-styles */
.bbioon-fancy-link {
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.2em;
/* Clipping the underline 0.5em from each side */
text-decoration-inset: 0.5em 0.5em;
}Animating the Underline Natively
Where this property really shines is when you start talking about transitions. Usually, if you want a “shooting star” underline effect, you’re back to using pseudo-elements and transform: scaleX(). But with text-decoration-inset, we can do it natively. By animating the inset values, the underline stays tied to the baseline metrics of the font, which looks much more professional.
.bbioon-animated-link {
text-decoration: underline;
text-decoration-inset: 0.1em 0.1em;
transition: text-decoration-inset 0.3s ease-in-out;
}
.bbioon-animated-link:hover {
/* Underline shrinks toward the center on hover */
text-decoration-inset: 2em 2em;
}The Reality Check: Browser Support
Now, here’s the kicker. As of right now, this is mostly a Firefox 146+ feature. If you try this in Chrome today, you’ll see… well, nothing. But as a pragmatist, I don’t let that stop me. This is the perfect candidate for “progressive enhancement.” For 90% of your users, they get a standard, clean underline. For the ones on modern browsers, they get that extra level of polish that makes your work stand out.
Look, this stuff gets complicated fast when you’re trying to balance design demands with clean code. If you’re tired of debugging someone else’s mess and just want your site to work—and look good while doing it—drop my team a line. We’ve probably seen it before.
So, What’s the Point?
- Native
text-decoration-insetis cleaner and more performant than using pseudo-elements. - Always use
emunits to ensure your decorations scale with the typography. - Don’t be afraid of “new” CSS; just treat it as an enhancement for modern browsers.
- Typography details like this build massive trust with high-end clients.
Leave a Reply