Making Links Easy to Recognize

A link has one modest job: look interactive and take the reader somewhere. Removing its underline, making it almost the same colour as body text, and revealing it only on hover makes that job unnecessarily difficult.

I usually keep underlines in running text. The browser’s old visual language is familiar, works without hover, and does not rely on subtle colour differences.

An underline is useful information

The default style communicates clearly:

a {
  color: blue;
  text-decoration: underline;
}

This version may be difficult to distinguish from nearby text:

a {
  color: #555;
  text-decoration: none;
}

especially when the body text is:

color: #333;

Colour can support the distinction, but it should not have to carry the whole job.

Modern underline controls make the default idea easier to fit into a design:

a {
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}

That retains the affordance without accepting every browser’s exact default typography.

Links inside a clearly designed navigation bar may not need individual underlines:

<nav>
  <a href="/">Home</a>
  <a href="/blogs/">Blog</a>
  <a href="/contact/">Contact</a>
</nav>

Position, spacing, and the navigation landmark already identify the controls. Inside a paragraph, that context disappears, so the underline becomes much more valuable.

Hover cannot be the only clue. Touchscreens do not hover, and keyboard users may never move a pointer over the link.

Focus must be as visible as hover

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

A person tabbing through the page should always see the active link. Test that outline on light, dark, and image backgrounds rather than assuming currentColor works everywhere.

Visited links can also communicate useful history on search results and long article lists. A design does not need an aggressive visited colour, but removing the distinction throws away information the browser provides for free.

Link text should describe the destination

This label has little meaning outside its sentence:

<a href="/guide/">Click here</a>

This one remains useful when scanned or listed separately:

<a href="/guide/">
  Read the CSS Grid guide
</a>

Card grids often repeat “Read more” ten times. Visible context may make those links understandable, but a specific accessible name is stronger:

<a href="/article/">
  Read “Modern CSS You Can Use Today”
</a>

The visual design can shorten what is shown while retaining the useful name.

Predictable behaviour is part of recognition

External links do not all need a warning, although a subtle marker can help in some contexts:

.external::after {
  content: " ↗";
}

I would not force external links into new tabs without a real reason. People already have browser controls for that choice, and unexpected tabs are rarely an improvement.

My body-text starting point remains simple:

a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

Then I add clear hover and focus states. Links are part of typography, but they are controls too. Making them obvious is more useful than making someone discover the design’s secret interactive colour.