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