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

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

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

Одно из наиболее популярных применений CSS для ссылок — убирание у них подчеркивания. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет, или используется и то и другое действие одновременно.

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

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

    Подчеркивание у ссылок   Наведи сюда курсор, увидишь результат

В данном примере при наведении курсора на ссылку, она становится подчеркнутой и красной.

HTML по теме

CSS по теме

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

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

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

В данном примере при наведении курсора на ссылку, она становится подчеркнутой и красной.

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

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

«Практическая типография» на Butterick: Если вы чувствуете желание акцентировать что-то, используйте жирный шрифт или курсив. В особых ситуациях, таких как заголовки, вы также можете рассмотреть возможность использования всех заглавных букв, маленьких заглавных букв или изменения толщины. Не уверены? Я предлагаю вам найти книгу, газету или журнал, в которых акцентируется текст.

Но в Интернете все по-другому. Гиперссылки являются важной частью Интернета; и с самого начала интернета они были подчеркнуты. Это общепризнанное соглашение. Значение кристально ясно — подчеркивание означает ссылку.

Тем не менее, большое количество популярных веб-сайтов убрало подчеркивание: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году Google удалили подчеркивания со страницы результатов поиска, их ведущий дизайнер Джон Уайли заявил, что это создало более чистый вид. Тем не менее, на большинстве этих сайтов сохранилось с небольшими различиями выделение традиционным сине-голубым цветом (#0000EE), который был цветом браузера по умолчанию с самого начала Интернета. Хотя это обеспечивает для большинства пользователей визуальную подсказку, этого может быть недостаточно для обеспечения соответствия доступности WCAG.

Цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, запроса ответа или различения визуального элемента. — WCAG 2.1

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

WCAG не обязывает строго использовать подчеркивания для ссылок, но рекомендует их. Пользователи-дальтоники должны иметь возможность различать ссылки. Вы можете выделить их другими способами, например, жирным шрифтом font-weight. Или вы могли бы сохранить эту старую визуальную доступность. Но если мы собираемся использовать подчеркивание, мы хотим, чтобы оно выглядело красиво. Марчин Вичари, дизайнер из Medium, описал идеальное подчеркивание как:

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

Для достижения этого традиционно требовались хитрости CSS.

Хаки, которые мы использовали

С этим трюком должны быть знакомы все разработчики — с помощью :border-bottom. Имитируя подчеркивание с помощью border-bottom, мы получаем контроль над цветом и толщиной. Эти псевдо-подчеркивания имеют одну проблему: слишком большое расстояние от текста. Вы могли бы потенциально решить эту проблему с помощью line-height, но и это имеет свои недостатки. Аналогичная техника использует box-shadow. Марчин Вичари впервые применил самую сложную технику, которая использовала background-image для имитации подчеркивания. Это были полезные хаки, но, к счастью, они больше не нужны.

Стилизация реальных подчеркиваний

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

text-underline-offset контролирует положение подчеркивания.

text-decoration-thickness контролирует толщину подчеркивания.

Согласно блогу WebKit: Вы также можете указать from-font для обоих этих свойств, что задает получение соответствующего показателя из файла используемого шрифта.

UX- агентство Clearleft смело использует (псевдо) подчеркивания, четко обозначая ссылки с помощью красочных стилей. Вот один из примеров искусственного подчеркивания:

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

Каждый уважающий себя веб-разработчик знает, что ссылки принято подчеркивать. Таким образом они выделяются из объема прочего контента. Также всем известно, что браузер без проблем различает ссылки и устанавливает свое уникальное отчеркивание для ссылок. Однако такое решение не всегда вписывается в общий дизайн сайта. Поэтому я расскажу, как избавиться от этого подчеркивания.

Все, что нам понадобиться для этого, это знакомство со свойством text-decoration. Именно оно отвечает за декорирование текстовых блоков. Если ему прописать значение none, то браузер перестанет подчеркивать текст ссылки

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

Значит для ваших ссылок как-то был указан другой стиль. Попробуйте поместить код в конец и добавить !important . а для всех псевдоэлементов указывать нет смысла т.к. color и text-decoraition наследуется. а еще может и border установлен.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Похожие публикации:

Как выставить errorlevel pascal
Как делать скрипт css посталовским 4
Как убрать отступы от края страницы в css
Как убрать рамки у кнопки css

Сделать подчёркивание ссылки за текстом

нужно как справа

При помощи него делаю нужное подчёркивание, однако оно перекрывает текст, т.к. располагается уровнем выше. Хочу сделать подчёркивание ссылок за текстом, т.е. уровнем ниже, чтобы текст оставался читаемым, а подчеркивание было под текстом. Прикрепляю картинку для наглядности. (если можете подсказать, посмотрев сайт, то реализовано нужное подчеркивание на unit*city (точка вместо *, а на сайте нажмите на гамбургер)

Как у тега убрать визуальные эффекты?

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

a.text:active, /* активная/посещенная ссылка */ a.text:hover, /* при наведении */ a.text

 block1

Отслеживать
ответ дан 25 июл 2016 в 11:45
5,542 2 2 золотых знака 20 20 серебряных знаков 41 41 бронзовый знак
Спасибо спасибо спасибо но при наведении мне как раз не надо
25 июл 2016 в 12:00

@ЕвгенийЛюбимов в таком случае достаточно прописать a.text:active, a.text <. >, а для наведения прописать отдельно ` a.text:hover <. >`, если понадобится в будущем. отметьте мой ответ принятым галочкой слева от вопроса, если он вам подходит

25 июл 2016 в 12:40
Мне подошел еще первый вариант задать цвет большего мне и не требовалось=) Но вам все равно спасибо!
25 июл 2016 в 13:23

@ЕвгенийЛюбимов не вопрос, но тогда следует учесть на будущее, что если всё-таки будет нужда задать какой-то другой цвет для ссылок при наведении, то, например, a.text:hover < color: green>a < color: #000 !important >не сработает, и придётся прописывать !important везде. а это повлечёт за собой вероятные проблемы в виде уродливого трудноподдерживаемого кода

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

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

HTML по теме

CSS по теме

Популярные материалы

О сайте

Основные разделы

HTML

CSS

Сайт

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

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

Хаки, которые мы использовали

Стилизация реальных подчеркиваний

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

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

Сделать подчёркивание ссылки за текстом

Как у тега убрать визуальные эффекты?

block1

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