Як змінити колір посилання в CSS: link, visited, hover, focus і active

Колір посилання сьогодні задають через CSS, а не через застарілі атрибути HTML. При цьому важливо оформити не лише звичайний стан, а й взаємодію: відвідане посилання, наведення миші, клавіатурний фокус і момент активації.

Хороше посилання має залишатися впізнаваним і водночас відповідати дизайну сайту. Самого лише кольору не завжди достатньо, тому після видалення стандартного підкреслення потрібно дати користувачеві іншу зрозумілу візуальну ознаку.

Базовий колір усіх посилань

Найпростіший варіант — вибрати всі елементи a і задати властивість color:

Наочний інтерактивний приклад. Наведіть курсор або перейдіть клавішею Tab по посиланнях нижче: спеціально обмежені стилі демонструють звичайний стан, :hover, клавіатурний фокус і вже відвідане посилання.

Ці правила обмежені класом демонстраційного блока й не повинні змінювати інші посилання сайту. Нижче показано той самий підхід у вигляді CSS-коду для використання у власному шаблоні.

a {
  color: #1769aa;
}

Таке правило впливає на всі посилання, яких стосується область дії CSS. На реальному сайті краще обмежувати селектор потрібним контейнером, щоб випадково не змінити кнопки, меню та інші компоненти.

.article-content a {
  color: #1769aa;
}

Якщо дизайн використовує CSS-змінні, колір посилань зручно зберігати в загальній змінній теми.

Псевдокласи станів посилання

Посилання змінює стан залежно від дій користувача. Для цього CSS надає кілька псевдокласів:

• :link — невідвідане посилання;
• :visited — відвідане;
• :hover — вказівник знаходиться над елементом;
• :focus і :focus-visible — елемент отримав фокус;
• :active — посилання активується в цей момент.

Ці стани не обов’язково повинні мати п’ять зовсім різних кольорів. Головне — користувач має бачити, що елемент інтерактивний, а клавіатурний фокус не можна робити непомітним.

Приклад повного оформлення посилання

Практичний набір стилів може виглядати так:

.article-content a:link {
  color: #1769aa;
}

.article-content a:visited {
  color: #6d4c9c;
}

.article-content a:hover {
  color: #0f4d7a;
  text-decoration-thickness: 2px;
}

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

.article-content a:active {
  color: #b00020;
}

Конкретні кольори потрібно підбирати під фон і палітру сайту. Цей приклад показує принцип, а не обов’язкові значення.

Чому focus так само важливий, як hover

Користувач миші бачить стан :hover, а людина, яка переміщується сторінкою клавішею Tab, орієнтується за фокусом. Якщо стиль задається лише на hover, клавіатурний сценарій залишається без зворотного зв’язку.

:focus-visible дозволяє показувати помітний контур передусім тоді, коли браузер вважає його корисним для способу введення. Видаляти стандартний outline правилом outline: none без повноцінної заміни не варто.

Чи можна прибрати підкреслення.

Технічно достатньо text-decoration: none, але з погляду UX результат залежить від контексту. Усередині абзацу посилання без підкреслення може зливатися зі звичайним текстом, особливо якщо колір відрізняється незначно або користувач погано розрізняє кольори.

.article-content a {
  text-decoration-line: underline;
  text-underline-offset: .15em;
}

.article-content a:hover {
  text-decoration-thickness: .14em;
}

Так можна зберегти звичну ознаку посилання й водночас зробити підкреслення акуратнішим. У меню або кнопках контекст сам підказує інтерактивність, тому правила там можуть відрізнятися.

Особливості :visited.

Браузери обмежують набір CSS-властивостей, які можуть візуально залежати від :visited, щоб сайти не могли використовувати історію відвідувань як канал витоку даних. Тому для відвіданих посилань краще розраховувати передусім на допустимі зміни кольору, а не будувати складну логіку оформлення.

Крім того, visited-колір має залишатися достатньо контрастним щодо фону й відрізнятися від звичайного тексту. Надто бліде відвідане посилання швидко перетворюється на проблему читабельності.

Як задати різні стилі посиланням статті та меню.

Не варто писати один глобальний набір правил для всіх посилань сайту. Меню, стаття, картка та кнопка вирішують різні завдання. Контекстні селектори дозволяють розділити оформлення.

.main-menu a {
  text-decoration: none;
}

.article-content a {
  text-decoration: underline;
}

.article-content a.external-link {
  font-weight: 500;
}

Такий підхід передбачуваніший, ніж довгий ланцюжок !important. Що точніша архітектура класів шаблона, то менше доводиться боротися зі специфічністю.

Контраст і доступність

Красивий фірмовий колір не завжди добре читається на білому або темному фоні. Посилання потрібно перевіряти в реальному розмірі шрифту та в усіх основних станах, включно з focus.

Перед публікацією корисно пройтися кількома пунктами:

• посилання відрізняється від звичайного тексту не лише ледь помітним відтінком;
• hover не робить текст менш контрастним;
• focus видно під час клавіатурної навігації;
• visited-стан залишається читабельним;
• стилі не залежать лише від кольору там, де інтерактивність інакше незрозуміла;
• у темній темі використовуються відповідні значення, а не ті самі кольори автоматично.

Перевірка клавіатурою займає менше хвилини й часто одразу показує проблеми, непомітні під час звичайного використання миші.

Підсумок

Колір і поведінка посилань задаються CSS. Для статті зазвичай достатньо базового кольору, зрозумілого visited-стану, hover і добре помітного :focus-visible. Підкреслення в тексті краще не прибирати без причини, а стилі меню й кнопок варто відокремлювати від звичайних контентних посилань.

Якщо потрібно відкрити окреме посилання в новій вкладці, див. матеріал про target="_blank" і noopener.