Menu

Post image 1
Post image 2
1 / 2
0

Advanced Link Styling: text-underline-offset

DEV Community·Nick Benksim·22 days ago
#BkHKnJp9
Reading 0:00
15s threshold

Stop Fighting Your Underlines: The Power of text-underline-offset We’ve all been there: you’ve spent hours perfecting your typography, selecting the perfect typeface, and adjusting the line-height until it’s just right. Then, you add a link, and the default browser underline comes in like a wrecking ball. It’s too thin, it’s hugging the baseline too tightly, and it’s slicing right through the descenders of your "g", "j", and "y" characters. It looks amateur, and frankly, it drives designers crazy. For a long time, we treated the default text-decoration as a necessary evil or something to be immediately suppressed with text-decoration: none . But in modern CSS, we finally have the tools to make underlines look intentional, elegant, and perfectly spaced. Let’s talk about how we can finally stop fighting our underlines and start styling them like pros.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More