CSS :any-link playground

Explore :any-link with links that have href. Change simple styles, compare real links against placeholders without href, and copy the generated CSS.

:any-link applies to any link with href, without depending on browser history.

Use :any-link when you want one rule to cover both :link and :visited.

HTML

<nav class="any-link-demo" aria-label="Any link demo">
  <a href="https://example.com/baselinelab-any-link-a">Link with href</a>
  <a href="#local-target">Local link with href</a>
  <a>Placeholder without href</a>
</nav>

CSS

.any-link-demo {
  display: grid;
  gap: 1rem;
  max-inline-size: 36rem;
}

.any-link-demo a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 0.75rem;
  color: #5b6170;
  font-weight: 700;
  text-decoration: none;
}

.any-link-demo a:any-link {
  color: #0f4c81;
  background-color: #dff3ff;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}