CSS :visited playground

Explore :visited with history-dependent links. Adjust only color properties allowed for privacy and review the generated CSS.

The visual result depends on the browser history for each URL.

Browsers may show the style to users while hiding it from APIs such as getComputedStyle() or querySelector(). For links, use LVHA order: :link, :visited, :hover, and :active when the rules have the same specificity.

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