Если Вы задались таким вопросом, то, скорее всего, Вам плохо знакомы стили CSS. В этой статье я опишу как можно убрать подчеркивание ссылок с помощью CSS, а также расскажу про противоположную задачу как сделать подчеркивание ссылок при наведении и т.п. Рассмотрим все возможные варианты.
По умолчанию все ссылки имеют подчеркивание. Это всегда стоит помнить при создании новых классов для тега в CSS.
За подчеркивание ссылок отвечает специальное свойство CSS text-decoration, которое может принимать следующие значения:
- underline (подчеркивание есть);
- none (выключить подчеркивание);
Примеры использования text-decoration
Пример №1. Убираем подчеркивание у ссылки
Рассмотрим первый вариант, в котором мы зададим общий (шаблонный) стиль для ссылок (цвет и размер) и еще зададим два класса ссылок. Класс podcherk включает ссылке подчеркивание, а notpodcherk соответственно убирает подчеркивание. Следующий код демонстрирует это:
Вот во что преобразуется этот код:
Последняя ссылка будет с подчеркиванием, поскольку, как я написал ранее, по умолчанию подчеркивание включено.
Пример №2. Убираем подчеркивание при наведение
Теперь рассмотрим такой случай, чтобы сделать подчеркивание ссылки при наведение курсора на неё.
Данный код преобразуется в такую ссылку:
Пример №3. Делаем красивое подчеркивание
На последок рассмотрим необычное оформление ссылки, а именно сделаем красивое подчеркивание для ссылки в трех вариантах: пунктирное, сплошное и фоновое. На самом деле это все экзотика, но в некоторых случаях можно сделать сайт более интересным, сделав необычное подчеркивание ссылок.
Преобразуется на странице в:
Вот в принципе и все самые интересные примеры по подчеркиванию ссылок. Главным ответом на вопрос этой статьи служит строка: text-decoration: none (убирает подчеркивание).
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Убрать подчёркивание у текстовых ссылок.
Решение
Используйте свойство text-decoration со значением none для селектора A .
Описание
По умолчанию ссылки всегда подчёркиваются, чтобы легко можно было отличить ссылку от рядового текста. Но в некоторых случаях подчеркивание допустимо убрать, когда очевидна разница между ссылкой и текстом.
Чтобы ссылки не подчер кивались, для селектора A следует добавить свойство text-decoration со значением none , как показано в примере 1.
Пример 1. Ссылка без подчеркивания
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан ни рис. 1.
Рис. 1. Ссылка, у которой отсутствует подчёркивание
Все ссылки в html по умолчанию подчеркнутые, и отображаются так во всех современных браузерах. Но реалии современного веб дизайна таковы, что нам приходиться убирать подчеркивание у ссылки почти в каждой новой работе.
Например ссылки которые необходимо стилизовать как кнопки в 99% случаев не имеют подчеркиваний, даже в основном тексте ссылки выделят только цветом. И полоска внизу появляется только при ховере. Если вы желаете узнать как сделать анимацию при наведении на ссылку читайте нашу статью на блоге.
Как убрать нижнее подчеркивание у ссылок html?
За нижнее подчеркивание отвечает свойство text-decoration, его можно применять не только к ссылкам, но и другим элементам на странице к примеру h1-h6. Поддерживается всеми браузерами с первой версии. Далее предлагаю взглянуть значения свойства:
- line-through — перечеркивает ссылку
- overline — добавляет верхнее подчеркивание
- underline — добавляет нижнее подчеркивание
- none — убирает подчеркивание
- initial — устанавливает значение по умолчанию
- inherit — наследует это свойство от родительского элемента
Для того чтобы убрать underline (подчеркивание) пишем в css text-decoration : none . Если мы собираемся применить правило ко всем ссылкам на странице пишем: