x
 
Лоран
10 мая 2012

Здравствуйте, товарищи.

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

Спасибо!



Волнующий вопрос! К сожалению, сейчас нет хорошего способа сделать это.

Подчёркивание через border-bottom позволяет управлять цветом и стилем линии, но не её позицией.

A {
  color: blue;
  text-decoration: none;
  border-bottom: 1px solid red;
}
A.dotted {
  border-bottom-style: dotted;
}
A.dashed {
  border-bottom-style: dashed;
}
solid dotted dashed
qwerty qwerty qwerty


С помощью line-height со значением меньше единицы можно подтянуть бордер ближе к базовой линии:

A {
   display: inline-block;
   vertical-align: baseline;
   line-height: .95;
}
solid dotted dashed
qwerty qwerty qwerty


Метод с уменьшенным line-height годится только для ссылкок из одного слова, длинные разрывают поток и ломают подчёркивание:

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


Если разные стили линии не нужны, можно перекрасить стандартную underline с помощью вложенного элемента:

A {
  color: red;
}
A > SPAN {
  color: blue;
}
qwerty


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

qwerty


Сергей Чикуёнок изобрёл подчёркивания ЦСС-градиентами:

A {
  color: blue;
  text-decoration: none;
  background: linear-gradient(left, red, red 100%);
  background-position: 0 95%;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
A.dashed {
  background: linear-gradient(left, red, red 60%, transparent 60%);
  background-size: 10px 1px;
  background-position: 0 95%;
  background-repeat: repeat-x;
}
A.dotted {
  background: linear-gradient(left, red, red 50%, transparent 50%);
  background-size: 2px 1px;
  background-position: 0 95%;
  background-repeat: repeat-x;
}
solid dotted dashed
qwerty qwerty qwerty


Его способ не работает в старых браузерах и достаточно неудобен на практике.

В будущем, когда все браузеры узнают свойства text-decoration-linetext-decoration-style и text-decoration-color из черновика ЦСС3, ваша задача решится элементарно:

A {
  color: blue;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
}

Пример, демонстрирующий новые свойства, работает в Файрфоксе:

solid double dotted dashed wavy
overline qwerty qwerty qwerty qwerty qwerty
line-through qwerty qwerty qwerty qwerty qwerty
underline qwerty qwerty qwerty qwerty qwerty

  • Знаете ли вы, что
  • В бюро такие ссылки называют «дыдыдышками».

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Вадим Макеев
10 мая 2012

Артём, если не делать display:inline-block (не пойму, к чему это), то рамка прекрасно переносится по строкам.


10 мая 2012

Вадим, display: inline-block во втором примере нужен для того, чтобы line-height влиял на позицию линии.

Илья Стрельцын
11 мая 2012

На позицию линии можно повлиять без инлайн-блока, но с дополнительным элементом: http://jsfiddle.net/d3WG6/

Егор Стремоусов
15 мая 2012

Объясните, а зачем вообще подчеркивать ссылки другим цветом?

Евгений Чечулин
23 апреля 2013

На мой взгляд самое стабильное решение на данный момент это использование base64 однопиксельной картинки: http://jsfiddle.net/dsda/d3WG6/35/.

Обсуждалось на хабре: http://habrahabr.ru/qa/38313/.

Помимо всего прочего, можно делать и точки, и пунктир, а в base64 они занимают не более 44 байт.

Самое главное — это кроссбраузерно и подходит для старых версий.

a {
  text-decoration: none;
  display: inline;
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
  background-repeat: repeat-x;
  background-position: center 0.95em;
}

Виолетта Морозова
4 апреля 2017

А можно и без инлайн-блоков, и без картинок, а относительно спозиционированным псевдоэлементом, если ничто не противоречит:
http://jsfiddle.net/k6they2L/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

3 1 1 Сайты для слабовидящих 2