Погуглил, нашёл мануалы через border-bottom: 1px dotted; но в результате получилась вот такая штука https://jsfiddle.net/p7a1qkn0/
Как сделать так что бы подчёркивание распространялось только на сам текст, а не на всю ширину строки и была подчёркнута каждая строка текста а не одна внизу?
К сожалению, стиль text-decoration: dotted пока не поддерживается большинством браузеров, а желание сделать что-то подобное — присутствует.
На помощь приходит border-bottom: dotted.
Однако, если между текстом и подчеркиванием, реализованным через text-decoration:underline — расстояние 1px, border-bottom дает два. Получается эффект, что подчеркивание немного оторвано от текста, что не очень приятно.
В ходе долгих экспериментов, были найдены параметры, которые дают то, что нужно на всех браузерах, правда работают только когда текст в одну строку:
В веб-дизайне часто прибегают к такому решению — подчеркивание ссылок пунктирной линией или точками. Такие ссылки обычно не совершают перехода на страницу, а открывают какой-либо скрытый слой. Например: на сайте expange.ru (если пользователь не авторизован) при нажатии на ссылку «Авторизация» открывается скрытый слой, на котором форма авторизации — удобно, быстро и без перезагрузки страницы (экономия трафика).
Подчеркивание черточкой
Подчеркивание точками
Примечание: В Internet Explorer 6 подчеркнуть точками не получится, выглядеть будет как подчеркивание черточкой.
Примечание
a:hover
Если при наведении ссылка меняет цвет, то не стоит забывать, что стандартное подчеркивание text-decoration:underline; , было изменено на text-decoration:none; и была установлена нижняя граница определенного цвета и стиля, поэтому, чтобы подчеркивание пунктиром тоже меняло свой цвет нужно делать так:
Свойство padding в ссылках
Если ссылка в стилях имеет свойство padding , например padding:5px 10px; , то наше нижнее подчеркивание ссылки будет на 5 пикселей отдалено от текста. Чтобы решить эту проблему нам понадобится «промежуточный тег»:
Категории
Читайте также
Комментарии
А ссылка на авторизацию в самой статье перекидывает на другую страницу
Спасибо за подсказку с промежуточным тегом. Это действительно решает проблему.
давно искал спс
Введите данные указанные при регистрации:
Социальные сети
Вы можете быстро войти через социальные сети: