Document

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

По умолчанию, браузеры применяют определенные наборы стилей 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 :

Источник

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

По умолчанию все ссылки подчёркнуты синим, но такое оформление легко изменить с помощью CSS-свойства text-decoration: none .

Убираем подчёркивание ссылок в CSS

Допустим, у вас есть ссылка:

Чтобы убрать нижнее подчёркивание, откройте файл со стилями и пропишите:

Вместо селектора по классу можно использовать и другие, например, селектор по типу элемента или атрибуту id .

Убираем подчёркивание ссылок в HTML

Если у вас нет доступа к стилевому файлу или на работе принято инлайнить стили, можете убрать подчёркивание прямо в HTML.

Сбросить стили в одной ссылке:

Убрать оформление во всех ссылках:

Селектор может быть любым — мы для примера показали селектор тега.

Будьте осторожны при сочетании инлайн-стилей и внешнего CSS, ведь стили в атрибуте style сложно переопределить.

Когда убирать подчёркивание

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

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

А ещё можно убрать подчёркивание у ссылки и добавить его текстовому блоку, например за счёт border-bottom . Такой приём чаще используется для навигации — пользователь видит, что элементы меню кликабельные, и понимает, на какой странице он находится.

Так что, если вам не нравится, как выглядят ссылки — стилизуйте их по-своему. Примеры можете подсмотреть в статье про нестандартное подчёркивание текста на чистом CSS. Главное — не забывайте про UX и старайтесь поменьше инлайнить.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

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

Пишу сайт по шаблону, и столкнулся с такой проблемой, что никак не могу убрать подчёркивание у ссылок!
Две одинаковых страницы только один на русском, а другой на английском, но оба подключены к одной CSS.
Русская версия

Search 
Notifications 
Profile 

Search 
Notifications 
Profile 

* < text-decoration: none; >body < background: #FCFCFC; margin: 0; >a < color: #000 !important; text-decoration: none; >aside < float: left; background: #333333; height: 100vmax; width: 175px; >aside ul < list-style-type: none; padding: 0px; margin: 0px; >aside div.navigation ul a li < color: #FCFCFC; display: block; padding: 8px 16px; font-family: pfdintextcondpro-regular, serif; font-size: 16px; text-align: center; text-decoration: none; >aside div.navigation ul a li:hover < background-color: #1F2123; border-left: 5px solid #cccc99; transition-delay: 0s; transition-property: background-color, #1F2123; transition-duration: 0.5s; transition-timing-function: ease-out; text-decoration: none; >aside div.navigation < >.logo < margin-top: 36px; text-align: center; margin-bottom: 36px; >.down < margin-top: 295px; >aside div.language < padding-left: 65px; >aside div.language ul a li < font-family: pfdintextcondpro-regular, serif; font-size: 14px; list-style: none; color: #FCFCFC; display: inline-block; margin-right: -0.25em; padding: 4px; text-decoration: none; >.network < text-align: center; margin-top: 25px; >aside div.network ul a li < list-style-type: none; display: inline-block; font-family: pfdintextcondpro-regular, serif; color: #FCFCFC; >@font-face < font-family: pfdintextcondpro-regular; src: url("../../fonts/pfdintextcondpro-regular.ttf") format("truetype"); font-style: normal; font-weight: normal; >

Использовал text-decoration — не помогает

Простой 3 комментария

Перед тем как продолжать с CSS, исправьте ошибки в разметке https://validator.w3.org/nu/
Потом прогоните через этот же валидатор и стили.

Следующим ходом замените флоаты на флексы и/или гриды.
Дальше по обстоятельствам.

aside div.language ul a
ссылкам нужно убирать text-decoration а не вложениям

а вообще кто вставляет li в ссылку? бред сивой кобылы какой то

Я сначала поместил тег «a» в тег «li» появилась эта проблема с подчеркиванием потом поменял местами и все прошло. Позже опять тоже самое.
P. S. Проблема началась после после подключения Bootstrap и Font Awesome.

Мне даже самому интересно стало)
Пробовали ли text-decoration:none!important; ?
А шрифт без подчеркивания? Проверьте в панели разработчика может наследование какое. Коммент сожет быть не о чем но так из виду не потеряю)

a:hover < color: #0056b3; text-decoration: underline; >и даже препроцессор @include hover()

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

Хотя бы так. Второе у вас конструкция Html категорически не правильная, прислушайтесь что вам пишут выше. li это элемент списка, ol ul и тп, вы не можете их вставить в отдельный div или же в тег a-href. Судя по всему вам еще рановато вообще что либо писать, изучите матч часть. Не хочу вас обидеть, но таковы реалии, ваш уровень это не уровень новичка, это уровень ничего.

Что бы вам было понятно наверняка: ul — это список, li — это элемент списка, с любым контентом, a это ссылка. В вашем случае в li присутствует контент в виде ссылки a.

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

Ankhena, да я с вами согласен, но человек столкнётся этим в последствии, не поняв почему у p,ul буду отступы, моя ошибка была в том что я не объяснил для чего это вообще. Подчёркивание уберёт сброс стилей.

Прошу прощения за оффтоп, но почему по вашему сброс родных для браузера стилей сомнительная идея? Да возможно не в такой конфигурации, но всё же почему?

FrelFrloich, Несколько ситуаций:
h1 — заголовки. Их можно оставить вообще без отступов? Нет, они слипнутся с остальным текстом и будет нечитаемая каша. Значит, их нужно нормализовать, привести к единому во всех браузерах виду, а не обнулить.
p — аналогично. Красную строку в вебе делать не принято, а значит слипнутся.
ul — вероятно, там где они используются для меню, карточек товаров и других элементов дизайна, им и не потребуются отступы или нужны будут какие-то конкретные, дизайнерские. Но есть еще контентная часть, заполняемая редактором (клиентом). И если в ней будут списки, то они должны иметь отступы и маркеры. Поэтому снова — переопределить, а не обнулить.
body — да. Смотрим в макет, отступ не нужен — обнуляем.

Посмотрите как устроен normalize.css и возьмите оттуда нужное.

Источник

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

Используйте свойство text-decoration со значением none для селектора A .

Описание

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Ссылка без подчеркивания
  

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

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

HTML по теме

CSS по теме

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

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Источник

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

Добрый день. Надоело на сайте подчеркивание ссылок, как избавиться, это понятно. Вопрос — как без подчеркивания сделать акцент что это ссылка, а не просто текст?

Но вообще самое понятное пользователю отображение ссылок — синий подчеркнутый текст (по дефолту так). Поэтому не рекомендуется сильно отходить от этого стереотипа.

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

Умный парень Лебедев советует не избавляться от подчеркивания ссылок. Лучше придумайте, как сделать подчеркивание в подходящем стиле.

Где тут ссылки, а где нет?

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

@0neS просто пример первый, возможно неудачный, я кнопки редко делал, хотя признаю через a.
иногда меню сильно отделено и весьма понятно, а с подчеркиванием смотрится плохо.
пример, который выглядит еще норм, но под капотом страх и ужас, мой второй сайт и первый заказ.. www.karaoke-utesov.com.ua

Для понимания почему хочу избавится от подчеркивания пример с сайта.

Здесь достаточно изменить «комментарии: все» на «все комментарии», изменить цвет и можно убирать подчёркивание.

Три первостепенных фактора:
1. выделить цветом отличного от основного текста
2. при наведении менять цвет или добавлять подчеркивание
3. cursor: pointer

Посмотрите прямо на этой странице блок справа «Заказы с Фрилансим» вам понятно какое слово ссылка, а какое нет?

Судя по приведенному автором примеру, автор не разделяет контент и управление.

Kaliha — ссылки которые интерфейсные (управление), действие которых очевидно, можно не выделять подчеркиванием. В это попадают все элементы из «Комментарии» и уже станет проще.
Ссылки на которые повязан JS (попап окна к примеру) можно выделять пунктиром.

Источник