Как оформить состояния ссылки: посещённая, наведение, фокус

Короткий ответ

У ссылки пять состояний, и у каждого свой псевдокласс. Записывайте их именно в таком порядке:

<style>
  a:link { color: steelblue; }
  a:visited { color: purple; }
  a:hover { color: tomato; }
  a:focus-visible { outline: 2px solid orange; outline-offset: 2px; }
  a:active { color: crimson; }
</style>
 
<p><a href="https://example.com/new-page">A new page</a> · <a href="#">This page</a></p>

• :link — ссылка, по которой ещё не переходили;
• :visited — уже посещённая;
• :hover — под курсором мыши;
• :focus-visible — выбрана с клавиатуры клавишей Tab;
• :active — в момент нажатия.

Почему порядок важен

У всех этих селекторов одинаковая специфичность, поэтому побеждает тот, что записан ниже. Если поставить :visited после :hover, посещённые ссылки перестанут менять цвет при наведении. Помогает запомнить порядок фраза «LoVe HAte»: Link, Visited, Hover, Active.

Ограничения :visited

Ради приватности браузер разрешает менять у посещённых ссылок только цвета: color, background-color, border-color и подобные. Размер шрифта, фон-картинку или display для :visited задать нельзя — иначе любой сайт мог бы узнать историю посещений.

Частая ошибка

Стили задают для a:hover, а для фокуса — ничего. Мышью всё видно, а при переходе по Tab выбранная ссылка ничем не выделяется. Добавляйте :focus-visible вместе с :hover, можно одним правилом: a:hover, a:focus-visible.