Styling link underlines in 2023

I remember years ago reading this article by Marcin Wichary about how they created custom link underlines at Medium using a lot of CSS trickery. I thought of it again when I was styling the links on my site and discovered all of the great link underline related CSS properties that have been well-supported since 2019! I'm not sure why, but I've totally missed all of these properties landing in browsers. Here's and example.

a {
  text-underline-offset: .25rem;
  text-decoration-thickness: .25rem;
  text-decoration-skip-ink: none;
  text-decoration-color: #666;
}

With just a few lines of CSS you creates some really nice-looking link underlines. It's a subtle design detail, but it can make the typography on your site look and feel much more refined. And as a bonus your links will still get a normal old underline if someone's browser doesn't support one of these properties. That's progressive enhancement, baby.

You can read in more detail about what all these properties do on MDN.

• text-underline-offset
• text-decoration-thickness
• text-decoration-skip-ink
• text-decoration-color