Designers should ensure interactive elements, like links, are distinguished by more than color alone. Underlining links is crucial for indicating their clickability. Some designers prefer not to underline due to aesthetic concerns, but underlining can be stylized using CSS properties. Options include adjusting the underline's distance with text-underline-offset, changing its thickness with text-decoration-thickness, and altering its color. Styles can even include dashed or dotted underlines, providing flexibility while enhancing usability.
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.
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.
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.
You could even use text-decoration-style to make the underline dotted or dashed, but that might be a step too far.
Collection
[
|
...
]