Убрать подчеркивание ссылки css при наведении

Убрать подчеркивание ссылки css при наведении

Средствами тегов HTML убрать подчеркивание у ссылок не представляется возможным. Поэтому для этой цели используются каскадные таблицы стилей (Cascading Style Sheets, CSS).

Одно из наиболее популярных применений CSS для ссылок — убирание у них подчеркивания. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет, или используется и то и другое действие одновременно.

Подчеркивание прячется с помощью стилевого свойства text-decoration: none , добавляемого к селектору A , как показано в примере 1.

Пример 1. Убирание подчеркивания у ссылки

В данном примере при наведении курсора на ссылку, она становится подчеркнутой и красной.

Здравствуйте, дорогие друзья!

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

Навигация по статье:

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

Отключаем подчеркивание

Чтобы в CSS убрать подчеркивание ссылки нам нужно воспользоваться специальным CSS-свойством text-decoration со значением none, которое нужно прописать в файле стилей нашего сайта для ссылки.

Читайте также:  Почему пишет форматировать флешку

Вот как это будет выглядеть на примере для ссылок размещенных в блоке с классом .link-blok:

Если Вы задались таким вопросом, то, скорее всего, Вам плохо знакомы стили CSS. В этой статье я опишу как можно убрать подчеркивание ссылок с помощью CSS, а также расскажу про противоположную задачу как сделать подчеркивание ссылок при наведении и т.п. Рассмотрим все возможные варианты.

По умолчанию все ссылки имеют подчеркивание. Это всегда стоит помнить при создании новых классов для тега в CSS.

За подчеркивание ссылок отвечает специальное свойство CSS text-decoration, которое может принимать следующие значения:

  • underline (подчеркивание есть);
  • none (выключить подчеркивание);

Примеры использования text-decoration

Пример №1. Убираем подчеркивание у ссылки

Рассмотрим первый вариант, в котором мы зададим общий (шаблонный) стиль для ссылок (цвет и размер) и еще зададим два класса ссылок. Класс podcherk включает ссылке подчеркивание, а notpodcherk соответственно убирает подчеркивание. Следующий код демонстрирует это:

Вот во что преобразуется этот код:

Последняя ссылка будет с подчеркиванием, поскольку, как я написал ранее, по умолчанию подчеркивание включено.

Пример №2. Убираем подчеркивание при наведение

Теперь рассмотрим такой случай, чтобы сделать подчеркивание ссылки при наведение курсора на неё.

Данный код преобразуется в такую ссылку:

Пример №3. Делаем красивое подчеркивание

На последок рассмотрим необычное оформление ссылки, а именно сделаем красивое подчеркивание для ссылки в трех вариантах: пунктирное, сплошное и фоновое. На самом деле это все экзотика, но в некоторых случаях можно сделать сайт более интересным, сделав необычное подчеркивание ссылок.

Преобразуется на странице в:

Вот в принципе и все самые интересные примеры по подчеркиванию ссылок. Главным ответом на вопрос этой статьи служит строка: text-decoration: none (убирает подчеркивание).

Ссылка на основную публикацию
Топ лучших видеокарт для игр
Видеокарты крайне быстро улучшаются, практически каждые полгода выходит видеоадаптер, значительно превосходящий предшественника. Активный прогресс обусловлен быстрым увеличением системных требований компьютерных...
Телефон леново включается но не запускается
Бывает, что пользователь включает свой смартфон, процесс доходит до заставки (логотипа) и дальше не грузится. Сразу начинается паника, ведь телефон...
Телефон леново инструкция для чайников
Большинство из нас чувствует себя неуверенно, когда приходится знакомиться с новой операционной системой. И несмотря на то, что Андроид сегодня...
Топ приложений для запоминания слов
Топ-8 приложений, где запоминать английские слова Приложения для изучения английских слов помогают быстро и эффективно пополнять словарный запас. Без работы...
Adblock detector