This content originally appeared on Adactio: Journal and was authored by Adactio: Journal
I was thinking about something I wrote yesterday when I was talking about styling underlines on links:
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.
For some reason, I completely forgot that we’ve got a line-height unit in CSS now: lh. So if you want to make the distance of your underline proportional to the line height of the text that the link is part of, it’s easy-peasy:
text-underline-offset: 0.15lh;
The greater the line height, the greater the distance between the link text and its underline.
I think this one is going into my collection of CSS snippets I use on almost every project.
This content originally appeared on Adactio: Journal and was authored by Adactio: Journal
Adactio: Journal | Sciencx (2025-08-14T08:16:38+00:00) Underlines and line height. Retrieved from https://www.scien.cx/2025/08/14/underlines-and-line-height/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.