Как убрать подчеркивание ссылки в CSS: простые способы и примеры

kirilljsx

Подчеркивание ссылок в CSS - это стандартное поведение браузера. Оно помогает отличить ссылки от текста, но часто мешает современному дизайну. В этой статье разберем, как убрать подчеркивание с помощью text-decoration: none, рассмотрим варианты для разных состояний ссылок и альтернативные подходы.

Знание этих приемов упростит верстку страниц. Вы сможете создать чистый интерфейс без лишних линий. Проблемы с дефолтными стилями решает пара строк кода в CSS.

Основной способ: text-decoration none

Свойство text-decoration управляет декорацией текста, включая подчеркивание. По умолчанию для ссылок () значение underline делает линию под текстом. Чтобы убрать ее, устанавливаем none. Это работает во всех браузерах и простое в применении.

Пример: обычная ссылка выглядит с синей линией. После добавления стиля линия исчезает, текст остается кликабельным. Важно применять правило ко всем псевдоклассам: a, a:hover, a:visited, чтобы избежать неожиданных линий при наведении или посещении.

Вот базовые варианты применения:

Селектор по тегу: a { text-decoration: none; } - убирает подчеркивание у всех ссылок.
По классу: .mylink { text-decoration: none; } - только для конкретных элементов.
Инлайн-стиль: <a style="text-decoration: none;">Текст</a> - быстро, но не рекомендуется для больших проектов.

Стилизация состояний ссылок

Ссылки меняют вид в разных состояниях: обычном, при наведении (hover), посещении (visited), фокусе (focus) и активности (active). Если убрать подчеркивание только у базового a, то при hover линия может вернуться. Поэтому стилизуем все псевдоклассы.

Например, в меню подчеркивание мешает наведениям. Решение - задать none для каждого состояния и добавить цвет или фон для hover. Это улучшает UX, делая ссылки заметными без линий. Таблица ниже покажет различия.

Состояние	Пример стиля	Эффект
a	`text-decoration: none;`	Убирает линию в покое.
a:hover	`text-decoration: none; color: red;`	Меняет цвет без линии при наведении.
a:visited	`text-decoration: none; opacity: 0.8;`	Затемняет посещенные ссылки.
a:focus	`outline: none; text-decoration: none;`	Убирает контур фокуса.

Не забывайте про доступность: используйте :focus-visible для клавиатурной навигации.

Альтернативы и продвинутые методы

Иногда text-decoration none не подходит, если нужно кастомное подчеркивание. Можно имитировать линию через border-bottom или новые свойства CSS. Это дает контроль над толщиной, позицией и цветом.

Например, border-bottom создает линию снизу с точной толщиной. Новые свойства вроде text-underline-offset сдвигают подчеркивание, а text-decoration-thickness меняет его ширину. Они работают в современных браузерах и решают проблемы с дефолтными стилями.

border-bottom: a { border-bottom: 1px solid currentColor; } - тонкая линия цвета текста.
text-decoration-skip-ink: none; - пропускает подчеркивание через буквы с выносными элементами.
Современные свойства: text-underline-offset: 0.2em; text-decoration-thickness: 0.1em; - точная настройка.

Метод	Плюсы	Минусы
text-decoration: none	Простота, универсальность	Нет контроля над кастомными линиями
border-bottom	Толщина, цвет настраиваются	Может сдвигать текст
Новые CSS-свойства	Точное позиционирование	Поддержка не везде

Практические примеры в коде

Давайте разберем полный код для типичного случая. Возьмем навигационное меню. Без стилей ссылки подчеркиваются. Добавим CSS-блок, который очистит линии и добавит hover-эффекты.

HTML:

<nav>
  <a href="#">Главная</a>
  <a href="#">Каталог</a>
  <a href="#">Контакты</a>
</nav>

CSS:

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

a:hover {
  color: #007bff;
  text-decoration: none;
}

a:visited {
  color: #666;
  text-decoration: none;
}

Этот код убирает подчеркивание везде. Для кнопок или карточек добавьте класс .btn-link с border вместо underline.

Частые ошибки и как их избежать

Новички забывают про специфичность CSS. Если фреймворк вроде Bootstrap задает underline, ваш стиль не сработает. Увеличивайте специфичность или используйте !important редко.

Еще проблема - мобильные устройства. Там hover не работает, но focus да. Всегда тестируйте на тачскринах. Плюс, не убирайте подчеркивание везде - в контенте оно помогает читаемости.

Специфичность: .menu a { text-decoration: none !important; } - для переопределения.
Доступность: Добавьте a:focus { outline: 2px solid #007bff; }.
Тестирование: Проверьте в Chrome DevTools на разных состояниях.

Если используете препроцессоры вроде SASS, группируйте стили для псевдоклассов.

Когда подчеркивание все же нужно

Иногда лучше не убирать линию полностью, а улучшить ее. Анимация появления underline на hover делает дизайн живым. Или используйте gradient для многоцветной линии.

Например: a:hover { text-decoration: underline wavy red; } - волнистая красная линия. Это сохраняет семантику, но добавляет стиль. Подумать стоит о контексте: в меню - none, в тексте - тонкая линия.

Новые свойства позволяют экспериментировать без хаков. Тестируйте на реальных устройствах, чтобы убедиться в кроссбраузерности. Дальше можно углубиться в CSS Grid для сложных меню.