CSS :link playground

Explore :link with unvisited links. Change simple styles, compare links with href against placeholders without href, and copy the generated CSS.

Links with href can match :link when they are not in the browser history.

For links, use LVHA order: :link, :visited, :hover, and :active when the rules have the same specificity.

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>

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