We shouldn’t rely on colour alone to indicate that something is interactive.
Take links, for example. Sure, you can give them a different colour to the surrounding text, but you shouldn’t stop there. Make sure there’s something else that distinguishes them. You could make them bold. Or you could stick with the well-understood convention of underlying links.
This is where some designers bristle. If there are a lot of links on a page, it could look awfully cluttered with underlines. That’s why some designers would rather remove the underline completely.
I’ve done a lot of audits in the first half of this year and at this point a believe that designing links without underlines is a kink. The idea that users don’t understand that links are clickable arouses some designers. I can’t explain it any other way.
But underlining links isn’t the binary decision it once was. You can use CSS to style those underlines just as you’d style any other part of your design language.
Here’s a regular underlined link.
For a start, you can adjust the distance of the underline from the text using text-underline-offset. If you’re using a generous line-height, use a generous distance here too.
Here’s a link with an offset underline.
If you’d rather have a thinner or thicker underline, use text-decoration-thickness.
Here’s a link with a thin underline.
The colour of the underline and the colour of the link don’t need to be the same. Use text-decoration-color to make them completely different colours or make the underline a lighter shade of the link colour.
Here’s a link with a translucent underline.
That’s quite a difference with just a few CSS declarations:
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
text-decoration-color: oklch(from currentColor l c h / 50%);
If that still isn’t subtle enough for you, you could even use text-decoration-style to make the underline dotted or dashed, but that might be a step too far.
Here’s a link with a dotted underline.
Whatever you decide, I hope you’ll see that underlines aren’t the enemy of good design. They’re an opportunity.
You should use underlines to keep your links accessible. But you should also use CSS to make those underlines beautiful.
# Shared by Tyler Sticka on Wednesday, August 13th, 2025 at 3:12pm
# Shared by Fynn Ellie Becker on Wednesday, August 13th, 2025 at 3:12pm
# Shared by mORA on Wednesday, August 13th, 2025 at 3:12pm
# Shared by Alex Russell on Wednesday, August 13th, 2025 at 3:12pm
# Shared by David Bushell 🥐 on Wednesday, August 13th, 2025 at 3:33pm
# Shared by J-P Teti on Wednesday, August 13th, 2025 at 3:44pm
# Shared by David O'Brien on Wednesday, August 13th, 2025 at 4:16pm
# Shared by Chris Palmer on Wednesday, August 13th, 2025 at 4:50pm
# Shared by Jay 🆘 on Wednesday, August 13th, 2025 at 5:21pm
# Shared by Hubert Sablonnière on Wednesday, August 13th, 2025 at 5:39pm
# Shared by Thomas Broyer on Wednesday, August 13th, 2025 at 6:05pm
# Shared by Moritz Glantz #a11y on Wednesday, August 13th, 2025 at 11:33pm
# Shared by Amy St. John on Thursday, August 14th, 2025 at 5:01am
# Shared by Ferdinand Vogler on Thursday, August 14th, 2025 at 6:35am
# Shared by Lyons on Friday, August 15th, 2025 at 2:18am
# Shared by Antoine on Thursday, August 21st, 2025 at 8:01am