Как сделать пунктирное подчеркивание текста?
Пунктирное подчеркивание в тексте используется для обозначения нового термина или аббревиатуры. Специально предназначенные для этой цели теги и добавляют к тексту всплывающую подсказку и устанавливают пунктирное подчеркивание. Но поскольку такое поведение не стандартизировано, то некоторые браузеры добавляют подчеркивание, а некоторые нет. Чтобы все выглядело одинаково, лучше воспользоваться стилями, создав подчеркивание с помощью свойства border-bottom , как показано в примере 1.
Пример 1. Пунктирное подчеркивание
HTML5 CSS 2.1 IE Cr Op Sa Fx
Пунктирное подчеркивание Веб-дизайн — методы и приемы оформления вида веб-страниц.
Результат данного примера показан на рис. 1.
Рис.1. Пунктирное подчечеркивание текста красным цветом
Как добавить пунктирное подчёркивание к ссылкам?
Пунктирное подчёркивание часто используется для оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе.
Для создания линии следует использовать свойство border-bottom со значением dashed , добавляя его к селектору A . Чтобы подчёркивание применялось не ко всем ссылкам, следует создать уникальный класс, назовём его, скажем, dot . Также необходимо убрать исходное подчёркивание у ссылок с помощью свойства text-decoration со значением none (пример 1).
Пример 1. Пунктирное подчеркивание
Результат примера показан на рис. 1.
Рис. 1. Вид обычной ссылки и ссылки с пунктирным подчёркиванием
Толщина линии и цвет подчёркивания у ссылок также задаются через свойство border-bottom .
См. также
- border-bottom
- text-decoration
- Начертание
- Оформление ссылок
- Свойства текста в CSS
- Стилизация ссылок
- Точки между слов
Как подчеркнуть ссылку пунктиром
В рунете иногда используется такой приём — подчёркивание ссылки прерывистой линией. Обозначает, что это на самом деле не ссылка, а какая-то штука, которая сработает прямо на странице.
Я называю такие ссылки «недоссылками», а Артём говорит «дыдыдышка» (изображает прерывистость линии словом dash).
Это редко когда годится, поэтому общий совет: не уверены — не используйте.
Но если уж взялись использовать, рисуйте нормально. Хорошо выглядит вот такое подчёркивание, где галочка:
Остальные варианты на этой картинке не годятся.
Когда точки идут слишком часто, не видно отдельных штрихов, получается просто более тонкая линия. Когда штрихи слишком длинные, они становятся сравнимы по размеру с буквами, возникает ненужное взаимодействие. Вот это отстой:
И саму линию надо делать тоньше. Но всё же толще, чем для сплошного подчёркивания, чтобы оно не потерялось. В моём хорошем примере линия полупиксельная. Если сделать четвертьпиксельную — уже плохо видно. А сплошному подчёркиванию вполне бы хватило.
Опытным путём установлено, что идеальный паттерн — это чередование трёхпиксельных штрихов и двухпиксельных пробелов (это как раз то, около чего галочка):
Непунктирные ссылки по теме:
- как понять «тоньше пикселя»,
- почему надо делать тонкое подчёркивание,
- почему тонкое подчёркивание лучше делать через бордер,
- как делать пунктирное и тонкое подчёркивание в Фотошопе (видео);
- галочки для шрифтов.
Как сделать пунктирное подчеркивание
p>a class="underline" href="#">Ссылка 1a>p>
.underline text-decoration: none; border-bottom: 1px dashed #444; color:#444; >
Что видим в браузере?
Для справки
Пунктирное подчеркивание соответствует не именно ссылкам, а текстовым командам, при клике по которым выполняются некоторые действия на текущей страничке. Но с появлением системы AJAX, которая позволяет обновлять документ без перезагрузки, такое подчеркивание начали применять к составляющим ее элементам. Это решение было принято для того, чтобы визуально отличать такие элементы на странице от обычных ссылок.
В каких браузерах работает?
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |