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

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

Все ссылки в html по умолчанию подчеркнутые, и отображаются так во всех современных браузерах. Но реалии современного веб дизайна таковы, что нам приходиться убирать подчеркивание у ссылки почти в каждой новой работе.

Например ссылки которые необходимо стилизовать как кнопки в 99% случаев не имеют подчеркиваний, даже в основном тексте ссылки выделят только цветом. И полоска внизу появляется только при ховере. Если вы желаете узнать как сделать анимацию при наведении на ссылку читайте нашу статью на блоге.

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

За нижнее подчеркивание отвечает свойство text-decoration, его можно применять не только к ссылкам, но и другим элементам на странице к примеру h1-h6. Поддерживается всеми браузерами с первой версии. Далее предлагаю взглянуть значения свойства:

  • line-through — перечеркивает ссылку
  • overline — добавляет верхнее подчеркивание
  • underline — добавляет нижнее подчеркивание
  • none — убирает подчеркивание
  • initial — устанавливает значение по умолчанию
  • inherit — наследует это свойство от родительского элемента

Для того чтобы убрать underline (подчеркивание) пишем в css text-decoration : none. Если мы собираемся применить правило ко всем ссылкам на странице пишем:

Для конкретной ссылки мы можем использовать строчные (inline) стили. Такие стили обычно добавляют javascript скрипты.

А так же явно указать правило ссылке через селектор класса, идентификатора или дочерний селектор.

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

В случае с фокус состоянием также может быть обводка, которая совмещается с подчеркиванием. Ее можно убрать, но я не рекомендую этого делать. И так пример.

На этом у меня все, я надеюсь у вас не осталось вопросов по работе с свойством text-decoration. До встречи в новых статьях.

comments powered by HyperComments