Playground de :visited en CSS

Explora :visited con enlaces dependientes del historial. Ajusta solo propiedades de color permitidas por privacidad y revisa el CSS generado.

El resultado visual depende del historial real del navegador para cada URL.

Los navegadores pueden mostrar el estilo al usuario, pero ocultarlo a APIs como getComputedStyle() o querySelector(). Para enlaces, usa el orden LVHA: :link, :visited, :hover y :active cuando las reglas tienen la misma especificidad.

HTML

<nav class="visited-demo" aria-label="Visited links demo">
  <a href="">Current page link</a>
  <a href="https://example.com/baselinelab-visited-demo">History-dependent link</a>
</nav>

CSS

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

.visited-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 #d8dee8;
  border-radius: 0.75rem;
  background-color: #ffffff;
  color: #1f7a5c;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: #1f7a5c;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.visited-demo a:visited {
  color: #7c3aed;
  background-color: #efe4ff;
  border-color: #a855f7;
  text-decoration-color: #f472b6;
}