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>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<nav class="grid gap-4 max-inline-xl *:inline-flex *:items-center *:justify-between *:gap-3 *:py-3 *:px-4 *:border *:border-solid *:border-[color-mix(in_srgb,_currentColor_20%,_transparent)] *:rounded-xl *:text-[#5b6170] *:font-bold *:no-underline [&_a:link]:text-[#1f7a5c] [&_a:link]:bg-[#d8f8ea] [&_a:link]:underline [&_a:link]:decoration-2 [&_a:link]:underline-offset-[0.22em]" 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;
}

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

  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 {
      color: #1f7a5c;
      background-color: #d8f8ea;
      text-decoration-line: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 0.22em;
    }
  }
}