Link

Links are underlined and use the primary color. Hover, focus and active states switch to the hover color, and keyboard focus shows a ring.

<p>
  <a href="#">Primary link</a><br />
  <a href="#" class="secondary">Secondary link</a><br />
  <a href="#" class="contrast">Contrast link</a>
</p>

Current page#

aria-current marks the link for the current page. It takes the hover color, so it works in navigation without a class. A value of false is ignored.

<p>
  <a href="#">Home</a> /
  <a href="#" aria-current="page">Current page</a>
</p>

Links that are not anchors#

The same styles apply to any element with role="link". Use it only when an <a href> is not possible, and add tabindex="0" and keyboard handling yourself.

<span role="link" tabindex="0">Looks like a link</span>

An <a> with role="button" is not styled as a link. It is a button.

Accessibility#

The underline stays on by default, so links do not depend on color alone. Use a meaningful link text rather than "click here", and give aria-current="page" to the link that matches the page.

Customization#

Link styles read the primary, secondary and contrast variables, so changing the theme changes links too.

--pico-primary

light-dark(#0172ad, #01aaff)

Link color.

--pico-primary-hover

light-dark(#015887, #79c0ff)

Link color on hover, focus, active and aria-current.

--pico-primary-underline

light-dark(oklch(0.53 0.1254 242 / 0.5), oklch(0.707 0.1679 242.1 / 0.5))

Underline color.

--pico-primary-hover-underline

var(--pico-primary-hover)

Underline color on hover.

--pico-primary-focus

light-dark(#017fc0, #01aaff)

Color of the keyboard focus ring.

--pico-secondary

light-dark(#5d6b89, #969eaf)

Color of .secondary links. Hover, underline and hover underline variants follow the same naming.

--pico-contrast

light-dark(#181c25, #dfe3eb)

Color of .contrast links, with the same variants.

In the classless build there are no .secondary or .contrast links.