Underline

In typography the underline has a bad name, and deservedly. It is a typewriter substitute for emphasis, which is what italic is for, and it collides with the letters it passes under. On the web it is a different animal entirely: it is the one visual convention every reader already knows means “this is a link”, and it does not rely on colour, which is what makes it the answer to WCAG’s use-of-colour requirement. A link distinguished by colour alone fails for readers who cannot see the difference; a link that is underlined does not.

The craft is in three properties browsers only recently gave us. Left alone, the rule sits too close to the text and cuts straight through the descenders on g, p and y, which is most of what makes underlined text look cheap. text-underline-offset pushes the rule down away from the baseline, text-decoration-thickness sets its weight (from-font takes the value the typeface itself specifies), and text-decoration-skip-ink: auto, now the default in most browsers, breaks the rule around the glyphs that cross it. Together they turn the browser default into something a typographer would sign.

Hiding underlines until hover is a common pattern and mostly a bad trade. It saves texture at the cost of discoverability: on touch there is no hover at all, and a reader scanning for the way out of a paragraph has nothing to scan for. The defensible version keeps a visible marker at rest, usually a thinner or lighter rule, and makes hover the emphasis rather than the reveal. In dense navigation and in card titles, where position and shape already say “clickable”, dropping the underline is reasonable; inside running prose it is not, and that distinction is worth writing into a design system rather than leaving to taste.

Two things the rule is not for. It is not for emphasis, since a reader will try to click it, and it is not the same thing as a border on the block, which is what a divider or an input’s bottom rule is. If you need a line under a run of text that is not a link, border-bottom on an inline element gives you full control over colour and distance, at the cost of the skip-ink behaviour a real text decoration gets for free.