Як змінити підкреслення посилань на веб-сторінці, css

За замовчуванням, браузери застосовують певні набори стилів CSS до конкретних HTML-елементів. Для гіперпосилань ці стилі за замовчуванням визначають, що будь-який текст посилання відображається синім кольором з CSS underline. Це робиться для того, щоб відвідувачі сайту могли легко визначити, що даний текст являє собою посилання. Багато веб-дизайнери не приділяють уваги цим стилям за замовчуванням, особливо це стосується підкреслення. На щастя, CSS дозволяє легко змінити зовнішній вигляд гіперпосилань.

Видалення підкреслення посилань

За допомогою цього рядка коду можна видалити CSS underline style всіх посилань.

Застереження щодо видалення підкреслення

Подобається вам підкреслення чи ні, не можна заперечувати того, що воно дозволяє вказати на зв'язок тексту з посиланням. Якщо прибрати підкреслення або змінити синій колір посилань, то потрібно надати взамін стилі, які дозволяють виділити текст посилань. Це зробить взаємодію відвідувачів з сайтом інтуїтивним.

Чи не підкреслюйте текст, не пов'язаний з посиланням

Чи не підкреслюйте текст, який не є посиланням. Люди звикли до того, що підкреслений текст (за допомогою CSS underline color) є посиланням. Якщо ви підкреслюєте контент, щоб акцентувати на ньому увагу (замість того, щоб вивести його напівжирним шрифтом або курсивом), ви вводите користувачів сайту в оману.

Змініть суцільне підкреслення точками або пунктиром

Якщо хочете зберегти підкреслення посилань, але при цьому змінити стиль за замовчуванням (лінія "solid"), це можна зробити наступним чином. Замість суцільної лінії використовуйте точки. Для цього потрібно видалити підкреслення і замінити його властивістю border-bottom:

Так як стандартне CSS text decoration underline ми видалили, буде відображатися тільки лінія з точок:

Те ж саме можна зробити, щоб отримати пунктирне підкреслення. Просто змініть значення border-bottom на dashed:

Зміна кольору підкреслення

Ще один спосіб звернути увагу користувачів на посилання - змінити колір підкреслення. Н забудьте, що колір text underline CSS повинен відповідати використовуваної колірної схемою:

подвійне підкреслення

Хитрість у створенні подвійного підкреслення полягає в зміні ширини рамки. Якщо створити рамку шириною в 1 піксель, в результаті вийде два підкреслення, які виглядають як одне:

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

Не забувайте про різні стани посилань

Також можна використовувати border-bottom для різних станів посилань. Використання псевдокласу: hover допоможе поліпшити досвід взаємодії користувачів. Щоб створити другу точкове підкреслення, що виводиться при наведенні на посилання курсора миші, використовуйте наступний код і деактивацію CSS text decoration underline:

Переклад статті «How to Change Link Underlines on a Webpage» був підготовлений дружною командою проекту Сайтобудування від А до Я.