CSS Links

1) Order of Link States (LVHFA)

a:link    { color: #1E88E5; }
a:visited { color: #6A1B9A; } /* browser privacy limits what you can change */
a:hover   { color: #0D47A1; }
a:focus   { outline: 2px solid #ff9800; }
a:active  { color: #E91E63; }

Classic order: Link → Visited → Hover → Focus → Active. Modern tip: prefer :focus-visible so mouse users don’t see outlines on click.

2) Default, Hover & Active

a         { color: #1E88E5; text-decoration: underline; }
a:hover  { color: #0D47A1; }
a:active { color: #E91E63; }

3) Better Keyboard Focus with :focus-visible

a:focus-visible {
  outline: 3px solid #ff9800;
  outline-offset: 2px;
}

:focus-visible shows focus when it’s helpful (keyboard/tabbing) and typically hides it for mouse clicks.

4) Removing Underlines (and Adding Better Ones)

.links a            { text-decoration: none; }
.links a:hover,
.links a:focus       { text-decoration: underline; }

/* modern underline controls */
.u a{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

5) Button-Styled Link

.btn-link{
  display: inline-block;
  padding: 8px 14px;
  background: #1E88E5;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}
.btn-link:hover{ background: #1565C0; }
.btn-link:active{ transform: translateY(1px); }

6) Navigation Links (Active/Current)

.nav a { text-decoration: none; color: #1E88E5; }
.nav a[aria-current="page"] {
  color: #0D47A1;
  font-weight: 600;
}

Use aria-current="page" for the active route (helps accessibility tools).

7) :any-link & :visited Notes

:any-link { color: #1E88E5; } /* matches a:link and a:visited */
/* Privacy: browsers restrict :visited styles to color-like properties only. */

:any-link is handy to style both unvisited and visited states at once. For privacy, :visited cannot change layout-affecting properties.

8) Smooth Hover Transitions (with Reduced Motion Support)

a { transition: color .15s ease, background .15s ease; }

@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}