A link needs its space

Ever used borders or pseudo-elements to customize your underlines for links? Yes, me too… But there’s a better way! The ‘text-underline-offset’ property allows you to control the distance between the text baseline and the underline.

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

You can use this offset to clear descenders, especially when links are grouped closely, such as in a bulleted list. I’d highly recommend adding it to your CSS reset.

Also, don’t miss that text-underline-offset has two nice friends, ‘text-decoration-color’ and ‘text-decoration-thickness’, if you get the urge to customize even more.