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>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

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