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>

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-[color-mix(in_srgb,_currentColor_20%,_transparent)] *:rounded-xl *:text-[#5b6170] *:font-bold *:no-underline [&_a:link]:text-[#1f7a5c] [&_a:link]:bg-[#d8f8ea] [&_a:link]:underline [&_a:link]:decoration-2 [&_a:link]:underline-offset-[0.22em]" 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;
}

.link-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 color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 0.75rem;
    color: #5b6170;
    font-weight: 700;
    text-decoration: none;
  
    &:link {
      color: #1f7a5c;
      background-color: #d8f8ea;
      text-decoration-line: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 0.22em;
    }
  }
}