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>

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-[#d8dee8] *:rounded-xl *:bg-white *:text-[#1f7a5c] *:font-bold *:underline *:decoration-[#1f7a5c] *:decoration-2 *:underline-offset-[0.22em] [&_a:visited]:text-[#7c3aed] [&_a:visited]:bg-[#efe4ff] [&_a:visited]:border-[#a855f7] [&_a:visited]:decoration-[#f472b6]" 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;
}

.visited-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 #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 {
      color: #7c3aed;
      background-color: #efe4ff;
      border-color: #a855f7;
      text-decoration-color: #f472b6;
    }
  }
}