Если вы хоть раз верстали лендинг или настраивали стили для ссылок, то наверняка сталкивались с этим — подчёркивание по умолчанию. То самое синее оформление у <a>, которое тянется из глубин раннего интернета. Но в современном дизайне уже давно кастомные кнопки, интерактивные карточки и ссылки, которые часто не выглядят как ссылки вообще. И тут подчёркивание может мешать.
Разбираемся, когда убирать подчёркивание, как делать это правильно и что пойдёт не так, если забыть про специфичность селекторов.
Зачем убирать подчёркивание у ссылок?
Само по себе подчёркивание — это важная часть визуального языка интернета. Пользователь с первого взгляда понимает: ага, вот на это можно кликнуть. Это ссылка, и она куда-то ведёт.
Не нужно убирать подчёркивание просто потому, что «так красивее». Оно делает интерфейс предсказуемым, помогает пользователю ориентироваться — особенно на десктопе. Если убрать подчёркивание без замены на что-то равноценное, вы рискуете получить невидимую ссылку — и тогда начинается UX-коллапс: юзер не кликает, потому что не понимает, что можно.
А что насчёт доступности?
Если вы используете тег <a href=”…”>, то с точки зрения доступности всё ок, даже если уберёте подчёркивание. Скринридеры и клавиатура всё равно распознают это как ссылку. Но вот если визуально ссылка ничем не выделяется (нет подчёркивания, цвета, курсора, иконки) — пользователь может просто не заметить, что перед ним кликабельный элемент. Особенно если он не различает цвета, или у него слабое зрение, или он зашёл с телефона, где нет эффекта наведения.
Поэтому, убирая подчёркивание, всегда добавляйте что-то взамен: границу, цвет, иконку, тень — что угодно. Ссылка должна быть понятной на вид, а не только по поведению. Дальше разберём подробнее, когда убирать, а когда менять.
Когда это нужно (дизайн, UX, интерактивные элементы)
1. Кастомный дизайн
Когда дизайнер делает ссылку частью кнопки, карточки или любого другого UI-элемента, подчёркивание начинает выглядеть чужеродно. Особенно если у вас кнопка из <a>, а не <button> — подчёркивание сбивает восприятие и рушит визуальную иерархию.
Оформили ссылку как кнопку, и автоматически добавилось бесполезное подчёркивание:
👉 Важный момент: если мы добавляем кнопку, которая что-то делает (открывает модалку, отправляет форму, запускает скрипт), то используем <button>, а не <a>. А вот если кнопка ведёт по какому-то адресу — тогда <a href=”…”> и оформляем как кнопку.
2. Навигация
Меню сайта, хедер, футер — в таких местах ссылки часто оформляют цветом, без подчёркивания. Например, в хедере Практикума подчёркиваний нет вовсе, но при этом путаницы это не вызывает. Элементы навигации расположены предсказуемо — справа от логотипа, всё выровнено, аккуратно, читаемо. Для кнопки «Профиль» используется другая визуальная иерархия — она выделяется цветом:
При оформлении хедера самое главное — чтобы была понятна интерактивность: допустим, можно сделать подчёркивание при наведении (ховере), но не в покое. Например, так:
3. Ссылки внутри карточек, баннеров и других интерактивных блоков
Если весь блок кликабельный, подчёркивать заголовок смысла нет. Пользователь уже понял: эта штука куда-то ведёт. Например: каждая секция — это целиком <a> или обёртка с onclick, реагирующая на ховер. Юзер наводит — и блок начинает подсвечиваться.
4. Мобильный UX
Некоторые гайды (например, Adobe XD Blog) советуют вообще не использовать подчёркнутые ссылки в мобильных версиях. Это хорошо на десктопе, а вот на мобилке должны быть кнопки, а не ссылки.
Но в реальных приложениях и мобильных версиях сайтов всё равно бывают ссылки, которые ведут на другие экраны, профили, внешние ресурсы. Если их не обозначить, пользователь может просто не понять, что туда можно кликнуть. А какие-нибудь элементы типа стрелочек могут захламлять пространство:
При этом стандартное подчёркивание от <a> слишком жирное, слишком близко к тексту и визуально расплывается на маленьких экранах. Поэтому в этом случае мы сначала убираем подчёркивание по умолчанию, а затем добавляем тонкое подчёркивание через border-bottom.
Как убрать подчёркивание ссылки в CSS
Рассмотрим три способа убрать подчёркивание — от точечного до глобального по всему документу.
Способ 1: text-decoration: none; (базовый вариант)
Если нужно убрать подчёркивание у конкретной ссылки, а не во всём проекте, то мы прописываем свойство text-decoration: none через класс, ID или точечный селектор.
Например, у нас есть кнопка с классом button-link:
<a href="/buy" class="button-link">Купить</a>
Тогда пишем так:
.button-link {
text-decoration: none;
}
Важно после этого добавить ховер или курсор, чтобы элемент выглядел интерактивным.
Способ 2: Удаление подчёркивания только при наведении (:hover)
Иногда нужно сделать наоборот: оставить подчёркивание в покое, но убирать его при наведении, чтобы визуально разгрузить UI. Но такой вариант достаточно специфический. Он работает в дизайне, где подчёркнутая ссылка в покое — это фича, а не баг. Например, на новостных сайтах или в блоге.
Добавляем ссылке псевдокласс hover и убираем подчёркивание:
a:hover {
text-decoration: none;
}
Но если интерфейс современный и минималистичный, лучше делать наоборот: подчёркивания нет, но оно появляется при наведении.
Способ 3: Глобальное удаление для всех ссылок (a {…})
Если мы точно знаем, что весь интерфейс должен работать без подчёркиваний, можно выключить всё глобально для всех тегов a.
a {
text-decoration: none;
}Но здесь нужно действовать осторожно, поскольку это может привести к путанице, если в тексте останутся ссылки, выглядящие как обычный текст. Также не забываем про другие состояния ссылок — visited, focus и active.
Состояние visited по умолчанию:
Если тоже хотим отключить их стандартный вид, то прописываем так:
a,
a:visited,
a:focus,
a:active {
text-decoration: none;
outline: none;
}
Как убрать подчёркивание ссылки в HTML (устаревший метод)
До повсеместного распространения CSS стили часто писали прямо в HTML — внутри самого тега. Сейчас так почти не делают, но знать про это нужно.
Использование атрибута <a style=”text-decoration: none;”>
Иногда в старых проектах, особенно на WordPress или конструкторах без доступа к CSS, можно встретить вот такую картину:
<a href=”/buy” style=”text-decoration: none;”>Купить</a>
Стили написаны прямо внутри HTML-тега, в атрибуте style. Это называется инлайновое оформление — когда браузеру сразу в лоб указывают, как именно отображать элемент.
Это до сих пор работает, но такой подход — плохая практика.
Почему CSS предпочтительнее HTML?
На первый взгляд, это удобно: взяли ссылку, приписали style=”…”, подчёркивание исчезло. Но в итоге такой подход приводит к проблемам.
Плохая поддерживаемость
Если мы раскидаем style=”…” по всему проекту, то в будущем поменять оформление ссылок станет очень сложно. Когда дизайнер решит, что теперь у всех ссылок должен быть градиентный border, а у нас в документе сотни <a style=”text-decoration: none;”>, то менять каждый придётся вручную.
Специфичность
Инлайновый стиль почти невозможно переопределить из CSS. Он имеет самую высокую специфичность. Специфичность — это приоритет CSS-правил в случае конфликта стилей. У кого сильнее селектор, тот и выигрывает.
Поэтому сбросить такой стиль можно только через правило !important — или вообще через JavaScript.
a {
text-decoration: underline !important;
}Если вы используете CSS-фреймворк, где оформление добавляется через классы, инлайн-стиль будет идти поперёк всей системы.
Нарушение разделения логики
HTML — для структуры и смысла. CSS — для оформления. Когда мы всё делаем в одном теге, получается плохо поддерживаемая мешанина.
Потенциальная несогласованность
Сегодня вы написали одну ссылку с style=”…”. Завтра ваш коллега забудет — и проект начинает разъезжаться: где-то стиль из CSS, где-то инлайн, где-то и то и другое.
Инлайновые стили могут встречаться в ограниченных средах, где у вас просто нет доступа к CSS. Допустим, в старых темах на WordPress и в CMS с визуальными редакторами. Если вы оказались в такой ситуации, используйте style=”…” осознанно. Но как только появляется возможность — выносите стили в CSS.
Дополнительные настройки для ссылок
Итак, мы убрали подчёркивание, и теперь ссылка стала просто текстом. Чтобы пользователь понял, что по ней можно кликнуть, нам нужно настроить цвета, шрифт, границы, тени или другие визуальные подсказки.
Как изменить цвет и стиль ссылки без подчёркивания
Чтобы сделать ссылку понятной для пользователя, обычно достаточно просто задать цвет и поведение при наведении. Например, здесь цвет ссылки будет меняться при наведении:
.link {
text-decoration: none;
/* синий, но более современный*/
color: #2D9CDB;
font-weight: 500;
}
.link:hover {
color: #1B75BC;
}
Не используйте дефолтный синий (#0000EE), лучше возьмите оттенок, который вписывается в ваш дизайн. Можно сделать ссылку жирнее, задать другой шрифт, увеличить межбуквенное расстояние — всё это поможет ей выделиться.
Второй популярный пример — фон ссылки при наведении. Такой приём часто используют в списках, навигации, меню. Особенно хорошо работает на мобильных устройствах, где :hover заменяется на :active.
a {
text-decoration: none;
color: #333;
/* Добавляем внутренние отступы — нужен для фона при наведении */
padding: 4px 6px;
border-radius: 4px;
/* Плавная анимация появления фона при ховере */
transition: background-color 0.2s ease;
}
a:hover {
background-color: rgba(45, 156, 219, 0.1);
}
CSS также позволяет поменять тип подчёркивания — можно выбрать пунктир, волнистую линию или двойное подчёркивание:
a {
text-decoration-line: underline;
text-decoration-style: dotted; /* или dashed, double, wavy */
text-decoration-color: #888;
}
Все свойства можно писать в одну строчку:
a {
text-decoration: underline wavy #f00;
}
Добавление других эффектов (тень, граница вместо подчёркивания)
Если хочется выделить ссылку нестандартно, можно вообще не использовать text-decoration, а сделать подчёркивание с помощью border-bottom. С ним можно управлять толщиной линии, менять цвет подчёркивания, использовать разные типы линий (сплошная, пунктир, штрих) и добавлять отступ от текста, чтобы линия не прилипала к шрифтам (в отличие от text-decoration).
Синтаксис такой:
border-bottom: <толщина> <тип> <цвет>;
Например, добавим сплошную линию на расстоянии 2 пикселя от ссылки:
a {
text-decoration: none;
/* Сплошная линия толщиной 1 пиксель*/
border-bottom: 1px solid #aaa;
/* Отступ в 2 пикселя*/
padding-bottom: 2px;
}
/* Добавляем фон при наведении */
a:hover {
background-color: rgba(45, 156, 219, 0.1);
}
Обычно в интерфейсах используют только: solid, dashed, dotted. Всё остальное больше для кастомного дизайна.
Другой способ — добавить тень на ссылку через свойство text-shadow, но тут важно не переборщить, чтобы не получить стиль WordArt 2003. Особенно если тень слишком жирная, используется большое смещение, а фон слишком контрастный.
Тень уместна в микротипографике: лёгкая внутренняя тень, чтобы текст выглядел чётче, а также в декоративных заголовках, где тень — часть визуального стиля (неон, глитч, ретро).
Например, здесь мы добавляем мягкую полупрозрачную тень, которая немного смещается вниз, чуть размывается и делает белый текст читаемым на светлом фоне:
.link {
text-decoration: none;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
Используйте rgba(), чтобы тень была полупрозрачной, и делайте маленькие сдвиги: 1–2px хватает почти всегда. И главное, протестируйте в мобильной версии, чтобы тень не поплыла.
Частые ошибки и решения
Бывает так, что мы всё сделали правильно, прописали нужное свойство, а ссылка так и не меняется. Рассмотрим две частые ситуации, где всё ломается, и расскажем, что с этим делать.
Ссылка не меняется — проверьте специфичность CSS
Допустим, вы делаете хедер со ссылками:
<nav>
<a href="/about" class="link">О нас</a>
<a href="/blog" class="link">Блог</a>
</nav>И стилизуете их, убирая подчёркивание по умолчанию:
.link {
text-decoration: none;
color: #000;
}Но при обновлении страницы видите, что ссылки всё равно остаются подчёркнутыми. Вы открываете DevTools, ищете нужный элемент и видите, что ваш стиль зачёркнут:
Всё потому, что где-то в проекте (в другом файле, компоненте, фреймворке или UI-библиотеке) уже есть более специфичный стиль, который перебивает ваш:
a.link.active {
text-decoration: underline;
}CSS работает по правилам специфичности:
- Селекторы с тегами (a) слабее, чем с классами (.link).
- Селекторы с несколькими уровнями (nav a, .menu .item a) — сильнее.
- Inline-стили (style=”…”) побеждают всё.
- А если где-то прописано правило
!important, то оно применяется в первую очередь.
Чем сложнее проект, тем чаще вы будете сталкиваться с конфликтами стилей. Поэтому, если ваш стиль не применяется, проверьте в DevTools, что именно его перебивает, усильте селектор или измените логику. А заодно пересмотрите: а нужен ли этот стиль вообще?
Подчёркивание остаётся в некоторых браузерах (сброс стилей)
Вы всё отключили, но в Safari или Firefox ссылка всё равно подчёркивается на фокусе. Это происходит из-за браузерных стилей по умолчанию — браузеры любят добавлять text-decoration при разных состояниях. Чтобы это исправить, прописываем сброс состояний:
a,
a:visited,
a:focus,
a:active {
text-decoration: none;
outline: none;
}Если используете normalize.css или reset.css, он может это убрать за вас. Но если нет, прописываете вручную.
И ещё один момент: если работаете с JS-фреймворками, где стили часто прилетают из компонентов, убедитесь, что ваш CSS действительно применяется. Иногда стили в компонентах изолируются, и тогда внешний CSS просто не срабатывает. Откройте DevTools и посмотрите, не зачёркнут ли ваш стиль. Если зачёркнут — значит, его перебил более приоритетный стиль внутри компонента.
Примеры кода
Ссылка — это не обязательно стандартная черта. Стили text-decoration и border дают достаточно инструментов, чтобы делать подчёркивания выразительными и аккуратными.
CSS-код для удаления подчёркивания
Сохраните, чтобы не гуглить каждый раз. А ещё лучше — вставьте в свой UI-kit или добавьте шаблоны в редактор кода.
Убираем подчёркивание у элемента с конкретным классом:
.class {
text-decoration: none;
}
Убираем подчёркивание у всех ссылок в документе:
a {
text-decoration: none;
color: inherit;
}Убираем подчёркивание и обводку в разных состояниях:
a,
a:visited,
a:focus,
a:active {
text-decoration: none;
outline: none;
}Готовые сниппеты для копирования
Все виды подчёркивания можно делать не только через text-decoration, но и с помощью border-bottom.
/* Классическое подчёркивание */
a {
text-decoration: underline;
}
/* Альтернатива через border*/
a {
text-decoration: none;
/* Сплошная линия */
border-bottom: 1px solid #333;
padding-bottom: 2px;
}
/* Точки */
a {
text-decoration: underline dotted;
}
/* Альтернатива через border */
a {
text-decoration: none;
/* чтобы граница была того же цвета, что и текст */
border-bottom: 1px dotted currentColor;
padding-bottom: 1px;
}
/* Пунктирная линия */
a {
text-decoration: underline dashed;
}Более тонкая настройка пунктира через border-bottom:
a {
/* Цвет и толщина пунктира */
border-bottom: 1px dashed #999;
/* Отступ от линии */
padding-bottom: 1px;
}
/* Двойная линия */
a {
text-decoration: underline double;
}
/* Альтернатива через border */
a {
text-decoration: none;
border-bottom: 3px double currentColor;
padding-bottom: 1px;
}
/* Волнистая линия (поддерживается не везде) */
a {
text-decoration: underline wavy;
}Поддержка свойств зависит от браузеров, особенно у wavy. Но в современных браузерах (Chrome, Safari, Firefox) это всё уже работает нормально.
Бонус для читателей
Скидка 20% на все курсы Практикума до 30 ноября! «Чёрная пятница» и такие скидки бывают раз в год.
Вам слово
Приходите к нам в соцсети поделиться своим мнением о статье и почитать, что пишут другие. А ещё там выходит дополнительный контент, которого нет на сайте — шпаргалки, опросы и разная дурка. В общем, вот тележка, вот ВК — велком!
