Как убрать подчеркивание в css

Когда нужно как убрать подчеркивание в css, обычно речь идет о ссылках, но тот же прием подходит и для других элементов текста. Самый простой способ — задать свойство text-decoration и отключить линию. Важно понимать, что подчеркивание может появляться не только по умолчанию, но и через стили темы, браузерные правила или псевдоклассы.

Базовый способ

Для обычного текста или ссылки используйте значение none:

a {
  text-decoration: none;
}

Так вы уберете линию у всех ссылок на странице, если другие правила ее не переопределяют. Если нужно снять оформление только у части элементов, применяйте селектор точнее: к меню, кнопкам-ссылкам, карточкам или отдельным классам.

Полезно проверить результат в инспекторе браузера: если подчеркивание осталось, значит, его добавляет более специфичное правило. Тогда помогает более точный селектор или переопределение в нужном состоянии.

Как убрать линию только у нужного состояния

Иногда ссылка подчеркивается только при наведении, фокусе или посещении. В таком случае одного правила для a мало. Нужно задать оформление для состояний, которые вы используете:

• a:hover — при наведении мышью;
• a:focus — при переходе с клавиатуры;
• a:visited — после посещения;
• a:active — в момент нажатия.

a,
a:hover,
a:focus,
a:visited {
  text-decoration: none;
}

Такой вариант удобен, если тема сайта добавляет подчеркивание только в отдельных состояниях. Если оставить одно состояние без изменений, линия может появляться снова при наведении или после клика. Именно поэтому при поиске способа как убрать подчеркивание в css стоит смотреть не только на обычный селектор, но и на псевдоклассы.

Если нужно убрать подчеркивание не у ссылки

Свойство text-decoration работает не только для тегов a. Его можно применить к любому текстовому элементу, если подчеркивание было добавлено стилями. Например, так снимают оформление у заголовков, span-блоков или элементов интерфейса:

.note {
  text-decoration: none;
}

Если подчеркивание появляется не через text-decoration, а через границу снизу, метод будет другим. В таком случае проверьте:

• border-bottom — линия может быть оформлена как рамка;
• box-shadow — иногда используется как декоративная полоса;
• Фоновые градиенты — их можно принять за подчеркивание.

Когда линия создана не свойством текста, text-decoration: none; не даст эффекта. Тогда нужно удалить или переопределить именно то правило, которое рисует линию.

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

Самая распространенная ошибка — писать правило, но не учитывать каскад. Если стиль подключен раньше, а позже тема или библиотека задает другое значение, оно может победить. Еще одна проблема — слишком общий селектор: браузер применяет более конкретное правило из другого файла.

• Проверьте, не задано ли подчеркивание через !important в другом месте.
• Убедитесь, что правило написано для нужного элемента, а не для соседнего класса.
• Смотрите все состояния ссылки, а не только обычное.
• Если используется компонент из фреймворка, ищите его базовые стили.

Для проверки откройте страницу в браузере, наведите курсор на ссылку и нажмите Tab, чтобы увидеть состояние фокуса. Если линия не появляется ни при наведении, ни при переходе с клавиатуры, значит, стиль применен корректно. Такой подход помогает убедиться, что вопрос как убрать подчеркивание в css решен не частично, а для всех нужных случаев.

Итог простой: чаще всего достаточно text-decoration: none;, но при необходимости его нужно добавить для состояний :hover, :focus и других. Если подчеркивание не исчезает, ищите не только правило для текста, но и заменяющий его border или тень. После этого можно быстро понять, где именно мешает стиль, и убрать его без лишних правок.