Comments 20
А зачем :after?
Можно просто использовать
border-bottom: 1px dashed;
Можно просто использовать
border-bottom: 1px dashed;
Бывает нужно изменить позиционирование линии (сделать выше/ниже) относительно текста.
padding-bottom не?
UFO just landed and posted this here
Можно просто bottom менять: https://jsfiddle.net/qw5h82qp/7/
Визуальной разницы в примерах не вижу.
Это так и должно быть?
Это так и должно быть?
Да, так и должно быть.
Значение отступа bottom для обычной ссылки и интерфейсной ссылки-кнопки (текст в элементе span) должны немного различаться, чтобы расстояние между линией и текстом было одинаковым.
Решил это указать явно, чтобы немного сэкономить время тем, кто начнет применять такое подчеркивание.
Значение отступа bottom для обычной ссылки и интерфейсной ссылки-кнопки (текст в элементе span) должны немного различаться, чтобы расстояние между линией и текстом было одинаковым.
Решил это указать явно, чтобы немного сэкономить время тем, кто начнет применять такое подчеркивание.
UFO just landed and posted this here
Прием оформления используется тысячу лет, а какого нибудь «text-decoration: dashed-underline» до сих пор не придумали.
UFO just landed and posted this here
Существует свойство text-decoration-style, однако, увы, оно очень плохо поддерживается (caniuse).
Самое неприятное даже не то, что text-decoration-style еще не вышел за рамки экспериментального функционала основных браузеров (и то не всех).
Самое неприятное, что свойство позиционирования линии до сих пор нет даже в экспериментальном функционале основных браузеров. А это значит, что увидим мы это еще не скоро.
Без такого свойства смысл text-decoration-style во многом теряется.
Линия dashed на таком же расстоянии от текста, что и линия solid, смотрится уродливо:
Самое неприятное, что свойство позиционирования линии до сих пор нет даже в экспериментальном функционале основных браузеров. А это значит, что увидим мы это еще не скоро.
Без такого свойства смысл text-decoration-style во многом теряется.
Линия dashed на таком же расстоянии от текста, что и линия solid, смотрится уродливо:
Этот способ я использую только для оформления интерфейсных кнопок-ссылок (не знаю, как это правильно называется). Текст в таких кнопках обычно короткий и тестирование на мобильных устройствах показывает, что все в порядке.
Чтобы быть уверенным, что часть текста не перенесется на новую строку при изменении масштаба — можно использовать неразрывный пробел  :
Чтобы быть уверенным, что часть текста не перенесется на новую строку при изменении масштаба — можно использовать неразрывный пробел  :
<span class='show-on-map-link'>Показать на карте</span>
Используйте в качестве цвета для псевдоэлементов значение currentColor и будет вам счастье =)
Sign up to leave a comment.
Простой способ оформления подчеркивания у однострочных ссылок