Как отключить подчеркивание ссылки css
Перейти к содержимому

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

  • автор:

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

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

Чтобы ссылки не подчёркивались, для селектора A следует добавить свойство text-decoration со значением none , как показано в примере 1.

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

Результат данного примера показан ни рис. 1.

Ссылка, у которой отсутствует подчёркивание

Рис. 1. Ссылка, у которой отсутствует подчёркивание

См. также

  • text-decoration
  • Начертание
  • Оформление ссылок
  • Свойства текста в CSS
  • Стилизация ссылок

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

Убрать подчёркивание у ссылки или другого текстового элемента можно с помощью свойства text-decoration со значением none . Если нужно установить подчёркивание обратно, то используется значение underline

.link  text-decoration: none; > 

Убираем подчеркивание у ссылки с помощью CSS

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

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

На примере ниже у ссылки с классом noline удалено подчеркивание.

a.noline

Ниже этот же пример в Codepen, где наглядно видно, как это работает. У ссылки (тег A ) с классом noline линии снизу нет.

Как убрать синий цвет у ссылки

Чтобы убрать у ссылки синий цвет (или подсветку любого другого цвета), надо установить у нее свойства color в значение inherit (использовать свойство родительского элемента), тогда она скорее всего станет такого же цвета, как и обычный текст.

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

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

Это делается при помощи псевдокласса :hover, срабатывающего при наведении на элемент. Инструкция будет выглядеть так:

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

По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам . Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline . Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.

Обновлено: 2021-07-14 19:25:13 Вадим Дворников автор материала

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

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

С помощью этой строки кода можно удалить CSS underline style всех ссылок.

Предостережение относительно удаления подчеркивания

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

Не подчеркивайте текст, не связанный со ссылкой

Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст ( с помощью CSS underline color ) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание ( вместо того, чтобы вывести его полужирным шрифтом или курсивом ), вы вводите пользователей сайта в заблуждение.

Измените сплошное подчеркивание точками или пунктиром

Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию ( линия » solid » ), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom :

Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

Измените сплошное подчеркивание точками или пунктиром

То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed :

Измените сплошное подчеркивание точками или пунктиром - 2

Изменение цвета подчеркивания

Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:

Изменение цвета подчеркивания

Как сделать двойное подчеркивание

Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:

Как сделать двойное подчеркивание

Также можно использовать подчеркивание по умолчанию, чтобы создать альтернативное двойное подчеркивание. Например, чтобы одна из линий была двойной:

Как сделать двойное подчеркивание - 2

Не забывайте о различных состояниях ссылок

Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline :

a < text-decoration: none; >a:hover

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *