# Descender-aware link underlines

**URL:** <https://forum.kirupa.com/t/descender-aware-link-underlines/351965>\
**Category:** design\
**Created:** [November 1, 2014, 3:33am UTC](https://forum.kirupa.com/t/descender-aware-link-underlines/351965 "2014-11-01T03:33:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [November 1, 2014, 3:33am UTC](https://forum.kirupa.com/t/descender-aware-link-underlines/351965/1 "2014-11-01T03:33:15Z")

</div>

I was reading [this article on UUIDs](https://eager.io/blog/how-long-does-an-id-need-to-be/) earlier today, when I noticed the amazing way that the link underlines were rendered:

![](http://forum.kirupa.com/uploads/kirupa/7088/d9df95b8167bfb86.png)

I searched around to find out how it was done, and I mostly just found [this post from a Medium employee](https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9) on how they attempted something similar. Their technique doesn’t look at satisfying as what’s on the [eager.io](http://eager.io) blog, so I sent them a message asking how. Adam kindly responded and sent [this gist of how they do it](https://gist.github.com/adamschwartz/f4c3359b537eba887ea9).

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. 🌞

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [November 3, 2014, 5:27pm UTC](https://forum.kirupa.com/t/descender-aware-link-underlines/351965/2 "2014-11-03T17:27:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [November 3, 2014, 5:30pm UTC](https://forum.kirupa.com/t/descender-aware-link-underlines/351965/3 "2014-11-03T17:30:51Z")

</div>

Yup!

---

<div class="post-metadata">

**Author:** ![adamschwartz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/adamschwartz/32/7100_2.png) [@adamschwartz](https://forum.kirupa.com/u/adamschwartz)\
**Post date:** [November 11, 2014, 8:40am UTC](https://forum.kirupa.com/t/descender-aware-link-underlines/351965/4 "2014-11-11T08:40:33Z")

</div>

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](https://eager.io/blog/smarter-link-underlines/).

You can also install it on your website for free on the [Eager App Store](https://eager.io/app/eA9ULux0UOJP/install).