Playground de :link en CSS

Explora :link con enlaces no visitados. Cambia estilos sencillos, compara enlaces con href frente a placeholders sin href y copia el CSS generado.

Los enlaces con href pueden coincidir con :link si no están en el historial del navegador.

Para enlaces, usa el orden LVHA: :link, :visited, :hover y :active cuando las reglas tienen la misma especificidad.

HTML

<nav class="link-demo" aria-label="Demo links">
  <a href="https://example.com/baselinelab-link-demo-a">Unvisited link</a>
  <a href="https://example.com/baselinelab-link-demo-b">Another link</a>
  <a>Placeholder link without href</a>
</nav>

CSS

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

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

.link-demo a:link {
  color: #1f7a5c;
  background-color: #d8f8ea;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}