How to style links that don't look ugly

Let’s just get this out of the way: in bodies of text, links should always be underlined or highlighted in some way other than just color.

For people with color-based vision disabilities, the contrast between link color and text color may be insufficient. Adding an underline ensures that the link is always detectable as one to the people who use your site.

(For navigation lists, where it’s obvious that each item is link, this may not apply.)

A lot of folks think underlined links look ugly, though, so today, I wanted to share a few ways to style links with underlines so that they’re not. Let’s dig in!

text-decoration-skip-ink

The text-decoration-skip-ink tells browsers how to treat descenders in text.

A value of auto is now the default in most browsers, and will interrupt an underline when it is going to come in contact with a glyph. A value of none will cause the underline and characters to touch.

a {
	text-decoration-skip-ink: auto;
}

Here’s a demo of the text-decoration-skip-ink property.

text-decoration-color

By default, link underlines are the same color as the text. But you can use the text-decoration-color property to style them in a different color.

Here, links are blue, but have an underline color of red.

a {
	color: blue;
	text-decoration-color: red;
}

Here’s a demo of the text-decoration-color property.

text-underline-offset

The text-underline-offset can be used to change where the underline is positioned. A positive value pushes is further below the text, while a negative one moves it up into the text.

a {
	text-underline-offset: 0.5em;
}

Here’s a demo of the text-underline-offset property.

text-decoration-thickness

The text-decoration-thickness controls how thick the underline is. Surprisingly, a fraction of an em is much thicker than the default auto value.

a {
  text-decoration-thickness: 0.5em;
}

Here’s a demo of the text-decoration-thickness property.

Combining property

All of these properties can be mixed-and-matched to get the look you want.

a {
	color: blue;
	text-decoration-color: red;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 0.25em;
}

Here’s one last demo.