Как убрать подчеркивание у ссылки?
В вашем примере подчеркивания у ссылки нет. И достаточно всего одного text-decoration:none для дефолтного положения ссылки. Проверяйте какие классы еще навешаны на ссылки. Может там вообще border-bottom установлен.
26 июл 2017 в 9:21
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Значит для ваших ссылок как-то был указан другой стиль. Попробуйте поместить код в конец и добавить !important . а для всех псевдоэлементов указывать нет смысла т.к. color и text-decoraition наследуется. а еще может и border установлен.
Отслеживать
2,969 3 3 золотых знака 15 15 серебряных знаков 30 30 бронзовых знаков
Как убрать подчеркивание ссылок в css
Убрать подчёркивание у ссылки или другого текстового элемента можно с помощью свойства text-decoration со значением none . Если нужно установить подчёркивание обратно, то используется значение underline
.link text-decoration: none; > Как убрать подсветку ссылки css
По умолчанию ссылки всегда подчёркиваются, чтобы легко можно было отличить ссылку от рядового текста. Но иногда для стилизации текста их необходимо убрать. Для работы с ссылками правильно использовать псведо-классы . В примере ниже нижнее подчеркивание у ссылок убрано, но при наведении курсора — будет появляться.
href="#" alt="http://ru.hexlet.io">Перейти по ссылке a:link, a:visited text-decoration: none; > a:hover, a:active text-decoration: underline; > Как убрать подчеркивание ссылки 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 :
Изменение цвета подчеркивания
Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:
Как сделать двойное подчеркивание
Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:
Также можно использовать подчеркивание по умолчанию, чтобы создать альтернативное двойное подчеркивание. Например, чтобы одна из линий была двойной:
Не забывайте о различных состояниях ссылок
Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline :
a < text-decoration: none; >a:hover