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

html — Как убрать подчеркивание?

Вопрос задан 5 лет 4 месяца назад

Изменён 5 лет 4 месяца назад

Просмотрен 887 раз

Добрый день! Я дико извиняюсь за следующий глупый вопрос, но факт остается фактом, впервые за много лет работы со стилем к моему большому стыду не могу справиться вот с чем: как у span убрать подчеркивание, в том числе и при наведении как на картинку, так и на сам span? При чем у a подчеркивание есть и должно быть, т.е. на странице ссылки при наведении подчеркиваются, и при этом мне нужно исключить подчеркивание именно у <span>. Каким только способом не пытался, хоть тресни — подчеркивает. Никогда бы не подумал, что приду сюда с таким вопросом.

Подскажите, пожалуйста.

span.help,
a span.help,
a:hover span.help {
	text-decoration: none;
}

<p>
<a href="#"><img src="kartinka.jpg">
<span>Мемориальный комплекс</span>
</a>
</p>

• html
• css

Это происходит, потому что подчеркивание применяется именно к a, а не span, и манипулируя стилями span, вы не сможете повлиять на стили a. Поэтому единственный выход — ввести новый класс, например, help-a:

a {
  text-decoration: none
}

a:hover {
  text-decoration: underline;
}

a.help-a:hover {
  text-decoration: none;
}

<p>
  <a href="#"><img src="kartinka.jpg">
    <span>Мемориальный комплекс</span>
  </a>
</p>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

Сайт «Яху-ком» в браузере «Нетскейп навигатор» (XIV в. н. э.)

История
Издревле на Руси подчеркивали ссылки в интернете. Так решили выделять активные текстовые элементы программисты 400 лет назад. Традиция поддерживалась другими программистами, которые работали с новыми браузерами и языком гипертекстовой разметки. Это было понятно и нормально.

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

Лента
Первой заметной птичкой в рунете, которая перестала подчеркивать ссылки, стал обновленный сайт «Ленты-ру». За успехи в дизайне, они даже получили какую-то награду за лучший дизайн новостного сайта. Подчеркивание ссылок — это краеугольный камень «Ру/ководства».

---

Фрагмент сайта «Ленты-ру». Пунктирное подчеркивание выводится браузером и не имеет отношения к сайту.

---

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

Во-первых, подчеркивание убрали, потому что на сайте Ленты почти весь текст — ссылка на какой-то материал. Ссылок очень много и если их все подчеркивать, то получится кошмар.

В-вторых, при наведении, ссылки выделяются цветом, хотя все равно не подчеркиваются. Конечно, если подчеркивать, то будет еще понятнее и доступнее, но так тоже можно жить.

Приложения
Я склонен считать, что ссылки можно не подчеркивать, потому что уже выросло целое поколение, которое не видела интернета, где все ссылки были как в старые времена. Эти молодые люди в приложениях сидят больше, чем в браузере. Скоро они вырастут и вы уже не сможете сказать, что ссылки надо подчеркивать, потому что так делал мой отец, и отец моего отеца и его отецы тоже так делали. Больше не делают. Все, приехали.

Образец того, как не надо делать

Например, для наглядного примера возьмем приложение Фейсбука (см. скриншот выше). Разве может неподготовленный человек сказать, какие слова на скриншоте являются ссылками, а какие нет? А вот на старом сайте Яху сможет — там все очевидно (хотя и выглядит стремно).

Для приложений подчеркивать ссылки никто не собирается — это же не сайт 🙂 Также там кнопку могут не рисовать как кнопку, во имя крутости визуальной части приложения. Что скажут ребята на Дриббле, если я все сделаю в подчеркиваниях и кнопках словно это база данных какая-то?

Приходиться изворачиваться и для этого используют три составляющие:

1. Повелительное наклонение. На всех кнопках, которые могут что-то сделать вместо существительного (детали) лучше писать глагол в повелительном наклонении (показать детали). Тогда даже без дизайна кнопки будет понятно, что с этим можно что-то сделать. Часто, в угоду красоте, дизайнеры не рисуют кнопки с длинными названиями, поэтому они все равно остаются «Деталями», «Большим», «Поиском» и т. д.
2. Контекст. Если несколько слов находятся там, где обычно бывает меню, то скорее всего это меню. Значит на него можно нажимать. А если это список не внутри текста, то это почти наверняка ссылки.
3. Пипл схавает. Сейчас достаточно потыкать все в приложении, чтобы за 20-30 минут усвоить, что и где может быть ссылкой или нет. В приложении Фейсбука очень много всяких команд и все эти ссылки выглядят просто как текст, который зачастую даже не выделен цветом. Но если вы часто пользуетесь приложением, то вы почти наверняка без ошибок определите куда можно нажимать, а куда можно и не пытаться. Правда, приложение Фейсбука всем нужно, а ваш сайт без подчеркивания могут и не принять, быстро закрыв.

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

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

Всегда показывайте изменения в ссылке при наведении (особенно в списках, меню) — реализовать это не сложно и крутость вашего сайта такое решение не уменьшит.

Немного примеров: «Новая газета», музей «Гараж», «СПИД-центр».

подчеркнутых ссылок | Введение в специальные возможности

Люди с дислексией имеют проблемы с чтением и пониманием текста, несмотря на их IQ. Примерно 10% населения мира имеют эту дисфункцию. Использование простого языка и избегание заглавных букв помогает людям читать ваш текст.

Мы уже рассмотрели важность правильно объявленных ссылок. Основной визуальной разметкой ссылки является подчеркивание. Подчеркивание ссылки выделяет ее среди остального текста. Это хорошо. Но есть проблема с подчеркиванием. У каждой буквы есть основа. Думайте об этом как о строке, на которой находится письмо. Некоторые буквы — например, g, p, q, y, j — сидят на этой строке и «болтают ногами». Подчеркивая слово, вы зачеркиваете эти части букв, и их становится трудно читать.

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

Наш базовый стиль:

 a:hover { color: red; } 

Вы помните, как выглядит нестилизованная ссылка? Вот как это выглядит. Синий и с подчеркиванием. В нашем примере мы используем слово «Типография».

Решение 1

 а.граница {
    высота строки: 1.2em;
    текстовое оформление: нет;
    нижняя граница: 1px сплошной синий;
}
a.border:наведите {
    цвет нижней границы: красный;
} 

С этим решением у нас нет строки, проходящей через нисходящие элементы. Но это трудно поддерживать. Также подчеркивание может показаться немного «неправильным».

Риски в этом случае: Вы должны сохранить цвет границы (обычный и при наведении). Изменение цвета вашего шрифта приведет к изменению и этого цвета. Разработчик может забыть внести это изменение. Кроме того, вы должны найти правильное расстояние до вашей буквы. Вы можете получить рамку, которая «выпала из вагона», когда пользователь не увидит связи между копией ссылки и рамкой под ней.

Решение 2

 a.text-shadow {
    текстовое оформление: нет; /* нам не нужен этот родной стиль ссылок */
    нижняя граница: 3 пикселя сплошного синего цвета; /* из-за этой границы */
    отображение: встроенный блок;
    высота строки: 0,85; /* контролирует положение границы */
    text-shadow: /* закрашивает границу, применяя 'свечение' */
    2px 2px белый,
    2px -2px белый,
    -2px 2px белый,
    -2px -2px белый;
}
a.text-shadow:наведите {
    цвет границы: красный;
} 

Используя text-shadow, который соответствует фону, мы рисуем подчеркивание. Хороший, но сложный в обслуживании и не очень гибкий.

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

Однако риск тот же, что и в решении 1, т. е. вы не можете разместить свою ссылку на каждом фоне. Когда ваш CSS содержит text-shadow для желтого цвета вместо белого, вы не можете использовать тот же CSS для ссылки на белом или темном фоне. Текстовая тень должна соответствовать цвету фона.

Решение 3

 a.ink {
    -webkit-text-decoration-skip: чернила;
    текст-украшение-пропустить: чернила;
} 

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

К сожалению, это интеллектуальное решение не является стандартом, поэтому оно не всегда хорошо поддерживается браузерами. Тем не менее, он делает именно то, что мы хотим. Каждый так называемый выпадающий элемент пропускается и не зачеркивается. Опять же, это плохо поддерживается. Только Safari и Chrome/Opera поймут это объявление CSS. На самом деле, Safari изначально делает это как ссылку для пропуска оформления текста.

Ух ты!

Первая ссылка не оформлена. Во втором применено решение text-decoration-skip. Safari отображает подчеркнутые ссылки, как если бы у них был text-decoration-skip.

И, говоря словами человека с дислексией:

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

Поддержка браузера

Chrome с версии 61, Safari с версии 10.1 (требуется префикс -webkit — хотя ссылки будут обрабатываться так, как если бы к ним был применен -webkit-text-decoration-skip [приблизительно с середины 2017 года]) , Safari для iOS с версии 9.3, Chrome для Android с версии 61. Будем надеяться, что этот очень полезный метод получит больше поддержки со стороны разработчиков браузеров.

Извлеките из этого максимальную пользу

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

 Типографика 

 @supports not ((text-decoration-skip: ink) или (-webkit-text-decoration-skip: ink)) {
    a. ink-alt {
        текстовое оформление: нет;
        нижняя граница: 3 пикселя сплошного синего цвета;
        заполнение снизу: .2vh;
    }
    a.ink-alt: наведите {
        цвет границы: красный;
    }
}
a.ink-alt {
    -webkit-text-decoration-skip: чернила;
    текст-украшение-пропустить: чернила;
}
а: наведите {
    красный цвет;
} 

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

Вторник, 1 мая 2007 г.

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

Подчеркивание плюсов

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

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

• Является ли текст кликабельным ?
• Или это только подчеркивается?

Минусы подчеркивания

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

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

На практике

В приведенном ниже примере более крупный текст заголовка «Шаблоны и примеры» выделен синим цветом, и ему предшествует более крупный маркер. В нашем тестировании удобства использования мы обнаружили, что люди без колебаний нажимали на текст «Шаблоны и примеры».

Этот подход был реализован на домашней странице Usability.gov, потому что она насыщена текстом; кроме того, подчеркивание всех ссылок снижает удобочитаемость сайта. Когда мы протестировали сайт с пользователями, мы обнаружили, что текст заголовка с увеличенным маркером и синим текстом обозначает кликабельность.

Заключение

Ссылки должны быть организованы и представлены таким образом, чтобы пользователи могли интуитивно чувствовать «кликабельность». Конкретное решение, подчеркнутое или нет, менее важно, чем постоянное использование того или другого. Например, если подчеркивание нежелательно, это можно сделать с помощью (несвязанного) маркированного текста под заголовком с синим текстом.

Ссылки

Bailey, RW (2000, октябрь). Доступность ссылок .

Бейли Р.В., Кояни С. и Налл Дж. (2000 г., 7 сентября).