It is important that the style of links on a website are consistent. This is why hyperlinks are best styled using the a tag selector, but sometimes the default text-decoration: underline doesn't look appealing in the overall the design.

As a result, it is not uncommon for text-decoration: none to be applied and for border-bottom to be used as a more aesthetic underline.

The only consequence of this is that it can interfere with the styles of other hyperlinks on the page. After all, using the a tag selector will redefine the visual style of all hyperlinks.

There may be a tags used for components such as content cards where the default hyperlink treatment is undesired.

So exactly how should visually consistent hyperlinks be created without sacrificing maintainability? I have come up with three solutions, which are by no means groundbreaking; I just gave them fancy names:

  1. The classless method,
  2. The scope method, and
  3. The specific method

The classless method

The classless method styles hyperlinks based on whether or not there is a class on the a tag. The assumption here is that any a tags in a component will have a class, thus meaning that anything else is treated as a standard hyperlink.

The :not() CSS selector can be used in a way that will only style a elements without the class attribute.

a:not([class]) {
  /* hyperlink styles. */
}

The scope method

The scope method offers more control over styling, with less assumptions. a elements are only styled when nested in a container with a specific class, such as text or prose.

.prose a {
  /* hyperlink styles. */
}

The specific method

The specific method is a be all and end all approach. It works as its name suggests: by using specific styling.

With this method it is common to group a few selectors together. A mixture of elements and classes can be included.

p > a,
a.underline {
  /* visual hyperlink styles */
  /* add selectors as necessary but don't make it huge! */
}

With this method a lot of hyperlinks will be excluded, such as a tags in li tags, and so on.