CSS Links Lists Styling

Visited, Hover, Focus, and Active States

A complete link style considers several states. Visited links help users know where they have been. Hover helps mouse users. focus-visible helps keyboard users. Active gives feedback while the link is pressed.

Style focus at least as clearly as hover.
Keep visited color readable.
Do not remove focus outlines without replacement.

List Marker Strategies

Native markers are accessible and simple. Use ::marker for color and size changes, or pseudo-elements when you need custom icons. If you remove list-style, replace it with clear visual structure.

Prefer native markers for normal content.
Use custom icons for feature lists.
Keep spacing consistent across wrapped lines.

Navigation as Lists

A navigation menu is a list of links. Keeping the list structure helps assistive technology and makes responsive layout easier with flex or grid.

Use aria-current for the active page.
Keep tap targets large enough.
Support wrapping on small screens.

Accessible Link States

a {
  color: #2563eb;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
  color: #1d4ed8;
  outline: 2px solid #93c5fd;
  outline-offset: 3px;
}

.nav a[aria-current="page"] {
  font-weight: 700;
  color: #0f172a;
}

Custom List with Semantic HTML

<ul class="feature-list">
  <li>Keyboard-friendly navigation</li>
  <li>Visible focus styles</li>
  <li>Readable spacing between items</li>
</ul>

Marker Styling

.article-list li::marker {
  color: #2563eb;
  font-weight: 700;
}

.article-list li {
  margin-block: 0.65rem;
  line-height: 1.6;
}

Responsive Navigation List

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  list-style: none;
  padding: 0;
}

.nav-list a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

Before you move on