Styling Links with CSS

Links are the most important interactive thing on a page, so they deserve some care.

A solid starting point

1
2
3
4
5
6
7
8
9
10
11
12
13

<style>
  a {
    color: #1a5276;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  a:hover {
    color: #d94a00;
    text-decoration-thickness: 2px;
  }
</style>
<p>Read the <a href="#">opening-hours page</a> before you visit, or <a href="#">get directions</a>.</p>

The link keeps its underline (so it is obvious), changes color on hover, and the line gets thicker as feedback.

An animated underline

1
2
3
4
5
6
7
8
9

<style>
  .fancy {
    color: #1c1b1f; text-decoration: none; padding-bottom: 2px;
    background: linear-gradient(#d94a00, #d94a00) no-repeat left bottom / 0% 2px;
    transition: background-size 0.3s;
  }
  .fancy:hover, .fancy:focus-visible { background-size: 100% 2px; }
</style>
<p>Hover over <a class="fancy" href="#">this link</a> and the line grows.</p>

The “underline” here is a background image whose width goes from 0% to 100%, with a transition smoothing the change. Do not worry if that feels advanced for now.

Accessibility checklist

• Color alone is not enough. A link inside a paragraph should differ from the text by more than hue, usually with an underline. See Choosing Readable Colors.
• Keep a visible focus style. Never remove outlines without a replacement.
• Make the clickable area big enough. Around 44 by 44 pixels is a good target on touch screens, so padding helps.