The :any-link selector

• April 20 2022
• 2 min. read

The :any-link styles all a elements with an href attribute.

This allows us to target all links in a document, regardless of location or parents.

This is particularly useful when playing with text-decoration-* attributes.

Safari uses the -webkit- prefix for these properties so we need to duplicate work to ensure that the links display the same across browsers.

:any-link {
  border: 1px solid blue;
  color: orange;
}

/* WebKit browsers */
:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}

We can also add link pseudo-elements like :hover and :visited to the :any-link selector.

:any-link {
  border: 1px solid blue;
  color: orange;
}

/* WebKit browsers */
:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}

In this example, the default link removes the underline altogether. We then add text-decoration attributes with the :hover pseudo-clases.

:any-link,
:-webkit-any-link {
  text-decoration-line: none;
}

:any-link:hover,
:-webkit-any-link:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: hotpink;
  text-decoration-style: wavy;
  text-decoration-line: underline;
}

What we can do with links hasn't changed. How we do it has.

Edit on Github