Underlines Apart
Extra
Over time, I’ve used numerous techniques when it comes to formatting links. Quite often border did the trick, at times box-shadow came into play, not to mention background with gradient hacks. All these methods have pros and cons. But seeing how versatile text-decoration has become in recent years, nowadays I tend to favor good old underlines to make links easily recognizable. After all, this is the original way, the one that even predates CSS.
Underline your f*cking links, you sociopaths.
Line, color, style, and thickness are the four individual properties covered by the text-decoration shorthand, but it doesn’t stop there. We’ve been gifted with additional options for underlines, namely text-decoration-skip-ink, text-underline-offset, and text-underline-position.
Default styling
There are some HTML elements where browsers decide to add an underline by default: Links, abbreviations with a title attribute, and insertions, and unarticulated annotations.
Given how HTML works, these elements can be nested, so an abbreviation might end up inside a link. Using browser default styles once again, the abbreviation is now difficult to spot visually, because the underline of the link “swallows” the one from the abbreviation.
Offset to the rescue
To work around this, we could try to modify the underlines’ color, style, and/or thickness in a clever way, but adjusting the offset is usually favorable, as doing so ensures the individual underlines stand out. Head over to CodePen to see how it looks.
There are obviously limits to using offset; once an underline is too far away from the actual text, it no longer looks decent. I decided to use two levels on this site: The underlines of links are offset a bit more (and they also use twice the thickness and a color that differs from the text), to leave room for a regular-sized underline on top of them, that I use for abbreviations and insertions. I’ve deliberately added an insertion containing a link in the previous chapter; in case you missed it, scroll back up.