Как убрать подчеркивание в браузере
По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам . Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline . Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.
Как убрать подчеркивание ссылки 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 :
Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, отклики, дизлайки, подписки!
Добрый день. Надоело на сайте подчеркивание ссылок, как избавиться, это понятно. Вопрос - как без подчеркивания сделать акцент что это ссылка, а не просто текст?
Но вообще самое понятное пользователю отображение ссылок - синий подчеркнутый текст (по дефолту так). Поэтому не рекомендуется сильно отходить от этого стереотипа.
Многие убирают у ссылок подчеркивание, но возвращают его при наведении. При этом дополнительно выделяют цветом.
Умный парень Лебедев советует не избавляться от подчеркивания ссылок. Лучше придумайте, как сделать подчеркивание в подходящем стиле.
Где тут ссылки, а где нет?
плюсанул бы коммент..
хотя отдельными местами ссылки без подчеркиваний нужны и понятны, на тех же явно выделенных кнопках
1) Цвет ближе к синему
2) Для внешних ссылок я добавляю такой значёк: ⇡
P.S. Если сайт ориентирован на посетителя, то лучше оставить подчёркивание. Так привычней посетителю.
Для понимания почему хочу избавится от подчеркивания пример с сайта.
Здесь достаточно изменить «комментарии: все» на «все комментарии», изменить цвет и можно убирать подчёркивание.
Три первостепенных фактора:
1. выделить цветом отличного от основного текста
2. при наведении менять цвет или добавлять подчеркивание
3. cursor: pointer
Посмотрите прямо на этой странице блок справа "Заказы с Фрилансим" вам понятно какое слово ссылка, а какое нет?
Судя по приведенному автором примеру, автор не разделяет контент и управление.
Kaliha - ссылки которые интерфейсные (управление), действие которых очевидно, можно не выделять подчеркиванием. В это попадают все элементы из "Комментарии" и уже станет проще.
Ссылки на которые повязан JS (попап окна к примеру) можно выделять пунктиром.
Как добавить подчеркивание ссылки, как убрать подчеркивание ссылки, подчеркнуть ссылку через css? добавить подчеркивание с помощью css, изменить цвет подчеркивания ссылки! В общем все, что касается подчеркивания ссылок , как с подчеркиванием работать, стили по умолчанию и т.д.
Все о добавлении и удалении подчеркивания ссылки:
Подчеркивание ссылки по умолчанию
Поскольку наша ссылка не имеет исходного состояния, нам придется вывести стили ссылки с подчеркиванием по умолчанию! Мы делали пример страницы с цветами ссылки , там же можно посмотреть и подчеркивание ссылки по умолчанию!
Мы сделаем отдельный класс чтобы увидеть это подчеркивание по умолчанию прямо на даннйо странице!
Здесь мы видим, что есть некое свойство text-decoration , которое имеет значение underline - если вы изучали английский(и тут сразу про себя: вот же дурень! Нужно было учить английский в школе!)
Поскольку я учился и на "инфаке", то мне и задумываться не нужно. перевод: декорирование текста : подчеркивание. , но и если разложить слово under и + line переводится - под линией
Ну и плюс. вообще не красивое подчеркивание, каждая буква, которая имеет выступ за линию, разрывает подчеркивание! Это например буква у
Следующим пунктом уберем подчеркивание у ссылки!
Убрать подчеркивание ссылки css
Как мы уже выше обращали ваше внимание на свойство text-decoration. Чтобы убрать подчеркивание снизу, надо изменить значение text-decoration и поставить none
И добавим такой этот класс нашей ссылке
Результат удаления подчеркивания у ссылки через css
Чтобы это правило распространялось на все ссылки на сайте нужно написать просто без класса
Если нужно чтобы подчеркивание убиралось в определенном блоке, то выбираем блок, например этот блок, в котором написаны данные строки, имеет ид id="main_text"
При наведении на ссылку - убрать подчеркивание
Но мы хоти удалить подчеркивание не на всегда, а лишь тогда, когда мышка будет сверху ссылки! Как убрать подчеркивание при наведении на ссылку!
Давайте это сделаем! Нам понадобится псевдо класс :hover
Чтобы нам продемонстрировать убирание ссылки при наведении нам понадобится новая ссылка и новый класс
Псевдо-классы применяют стиль к элементам согласно их состоянию, которое может изменяться с помощью действий пользователя, а также может зависеть от расположения элемента в дереве документа. Селекторы псевдо-классов начинаются с двоеточия - " : " и обычно добавляются сразу же после селектора типа без дополнительных пробелов между ними:
Ссылки
Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:
Приведенный выше код содержит четыре CSS правила. При этом в каждом из селекторов используется псевдо-класс. Первое правило задает цвет для ссылок, по которым пользователи еще не переходили, если пользователь перешел по ссылке, то будет использовано второе правило. Псевдо-классы :hover и :active динамически изменяют отображение ссылки: :hover стилизует ссылку только в то время, когда над ней находится указатель мыши, а :active только тогда, когда пользователь уже щелкнул по ссылке, но кнопка еще удерживается.
Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.
Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами .
Подчеркивание ссылок
По умолчанию текст ссылок всегда отображается подчеркнутым. Используя свойство text-decoration вы можете либо совсем убрать подчеркивание ссылок либо сделать так, чтобы ссылка была подчеркнутой, только при наведении на нее курсора мыши.
Примечание: если подчеркивание ссылок отключается с помощью свойства text-decoration, то единственным визуальным отличием между ссылками и обычным текстом будет их цвет. Это может привести к тому, что пользователям может быть трудно отличить ссылки от текста.
Псевдо-классы :first-child и :last-child
Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:
Существует множество различных способов задать подчеркивание текста CSS . Если мы говорим об идеальном сценарии, подчеркивание должно удовлетворять следующим условиям:
- Располагаться ниже базовой линии строки;
- Не соприкасаться непосредственно с частями букв, выступающими ниже базовой линии;
- Должна быть возможность изменять цвет, толщину и стиль линии подчеркивания;
- Подчеркивание должно продолжаться после переноса текста;
- Подчеркивание должно работать на любом фоне.
Все это довольно очевидно. Но, насколько я знаю, не существует способа добиться всего этого с помощью CSS .
Подходы
Способы, с помощью которых можно подчеркнуть текст в интернете:
- text-decoration ;
- border-bottom ;
- box-shadow ;
- background-image ;
- Фильтры SVG ;
- Underline.js (canvas) ;
- text-decoration-* .
Давайте рассмотрим их один за другим и поговорим об их плюсах и минусах.
text-decoration
text-decoration CSS - это самый простой способ подчеркивания в CSS. Применяется всего одно свойство и на этом все. Для небольших размеров шрифта это может выглядеть довольно прилично, но увеличьте размер и та же линия начинает выглядеть неуклюже.
Самая большая проблема применения text-decoration - отсутствие настраиваемости. Свойство соответствует любому размеру шрифта или цвету текста, к которому оно применено, и не существует кроссбраузерного способа изменить заданный стиль.
- Его просто применять;
- Располагается ниже базовой линии;
- По умолчанию добавляет отступы от частей букв, выступающих ниже базовой линии ( в Safari и iOS );
- Переносится по строкам;
- Подходит для любого фона;
- Не добавляет отступы от частей букв, выступающих ниже базовой линии, в других браузерах;
- Нельзя изменить цвет, толщину или стиль линии подчеркивания.
border-bottom
border-bottom - отличается простотой использования и настраиваемостью. Свойство позволяет довольно просто изменять цвет, толщину и стиль линии подчеркивания текста CSS .
Результат применения border-bottom к строчным элементам:
Обратите внимание, что линия подчеркивания размещается под частями букв, выступающими ниже базовой линии. Это можно изменить, задав для элемента свойство inline-block и уменьшив значение line-height . Но в этом случае вы теряете возможность переносить текст. Подходит для однострочного текста.
Можно использовать свойство text-shadow , чтобы скрыть часть линии подчеркивания, выступающей ниже базовой линии. При этом необходимо использовать цвет фона. Данный подход работает только со сплошными цветами фона, но не с градиентной заливкой или изображениями.
Чтобы задать одно подчеркивание, нужно применить четыре свойства стилей. Это больше, чем для text-decoration .
- С помощью text-shadow можно задать отступы от частей букв, выступающих ниже базовой линии;
- Можно изменить цвет, толщину и стиль линии CSS подчеркивания;
- Можно задать переходы и анимацию для цвета и толщины линии подчеркивания;
- Переносится по умолчанию, если это не inline-block ;
- Работает на любом фоне, если не используется text-shadow .
- Размещается далеко от текста, это положение трудно изменить;
- Нужно использовать много дополнительных свойств;
- Странное выделение текста при использовании свойства text-shadow .
box-shadow
Это свойство формирует подчеркивание с помощью двух теней: одна создает прямоугольник, вторая - скрывает большую его часть, кроме нижней. Данный метод применим только для однотонного фона.
Можно использовать тот же самый трюк, что и с text-shadow , чтобы имитировать отступы от частей букв, выступающих ниже базовой линии. Если линия подчеркивания должна отличаться по цвету от текста, то у вас не возникнет таких проблем, как в случае с text-decoration .
- Нижнее подчеркивание CSS может быть размещено ниже базовой линии;
- С помощью text-shadow можно задать отступы ниже базовой линии;
- Можно изменить цвет и толщину линии подчеркивания;
- Подчеркивание переносится построчно.
- Невозможно изменить стиль;
- Не работает для любого фона.
background-image
background-image дает результат, подходящий под все перечисленные критерии. При этом используются linear-gradient и background-position, чтобы создать изображение, которое повторяется по горизонтали вдоль строк текста. При этом для текста должно быть задано display: inline;.
Вместо linear-gradient можно добавить собственное изображение с какими-нибудь эффектами.
- Подчеркивание ссылки CSS может быть размещено ниже базовой линии;
- С помощью text-shadow можно задать отступы ниже базовой линии;
- Можно изменять цвет, толщину и стиль подчеркивания;
- Работает с пользовательскими изображениями;
- Подчеркивание переносится построчно;
- Работает на любом фоне, если не используется text-shadow .
- Размер изображения может изменяться по-разному в зависимости от разрешения, браузера и масштаба просмотра.
Фильтры SVG
Можно создать SVG элемент filter , который рисует линию, а затем расширяет текст, чтобы скрыть прозрачные части линии. После этого нужно задать для фильтра идентификатор и сослаться на него в CSS :
Преимущество этого подхода заключается в том, что фильтр добавляет прозрачность, не используя text-shadow . Можно задать промежутки линии CSS подчеркивания выступающими ниже базовой на любом фоне. Но этот метод не применим для однострочного текста, в этом его основной недостаток.
Вот как это выглядит в Chrome и Firefox :
Поддержка браузерами IE , Edge , и Safari является проблематичной. Проверить наличие поддержки SVG-фильтра в CSS трудно.
- Может быть размещено ниже базовой линии;
- Можно задать отступы ниже базовой линии;
- Можно изменять цвет, толщину и стиль линии подчеркивания;
- Работает на любом фоне.
- Подчеркивание не переносится на несколько строк;
- Не работает в IE , Edge или Safari , но можно создать резервный вариант с помощью text-decoration . В Safari оно будет выглядеть хорошо в любом случае.
Underline.js (canvas)
Underline.js рисует CSS подчеркивание с помощью элементов . Это новый подход, который работает на удивление хорошо.
Это только техническая демо-версия, поэтому для использования библиотеки придется осуществить глобальные изменения в разрабатываемом проекте.
Мы приводим данный метод для демонстрации возможностей при создании красивых, интерактивных подчеркиваний.
Свойства text-decoration-*
Это свойство прекрасно работает само по себе, но можно добавить несколько экспериментальных свойств для настройки внешнего вида:
- text-decoration-color ;
- text-decoration-skip ;
- text-decoration-style .
Только не радуйтесь раньше времени. Помните о проблеме поддержки браузерами.
TEXT-DECORATION-COLOR
Позволяет изменить цвет CSS подчеркивания пунктиром отдельно от цвета текста. Данное свойство хорошо поддерживается браузерами. Оно работает в Firefox и с помощью префикса в Safari . Но если не обрабатывать разрывы ниже базовой линии текста, то Safari поместит подчеркивание поверх текста.
Читайте также: