Playground de :any-link en CSS

Explora :any-link con enlaces que tienen href. Cambia estilos sencillos, compara enlaces reales frente a placeholders sin href y copia el CSS generado.

:any-link aplica a cualquier enlace con href, sin depender del historial del navegador.

Usa :any-link cuando quieras cubrir tanto :link como :visited con una sola regla.

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;
}