Descender-aware link underlines

talk design
1

I was reading this article on UUIDs earlier today, when I noticed the amazing way that the link underlines were rendered:

I searched around to find out how it was done, and I mostly just found this post from a Medium employee on how they attempted something similar. Their technique doesn’t look at satisfying as what’s on the eager.io blog, so I sent them a message asking how. Adam kindly responded and sent this gist of how they do it.

It’s a really neat effect, and I plan to use/adapt Adam’s code on my own site(s) when I can. It’d be really cool if this were easier to do in CSS (like text-decoration: awesome-underline), but for now I’m just happy being able to create the effect at all.

Thought I’d share. :sun_with_face:

2

Before I read it, I’m going to guess: some kind of text outline/glow/shadow effect that would have to be rendered on top of the underline?

3

Yup!

4

Hey, just wanted to share with the community.

I ended up taking that Gist and building an actual open-source library which handles all of the nasty parts of implementing this yourself. It’s called SmartUnderline and you can read more about it in this blog post.

You can also install it on your website for free on the Eager App Store.

1 Like