Сегодня мы расскажем, как ссылки подчеркивают пунктирной линией.
По традициям верстки сайта каждый кликабельный элемент должен выделяться на фоне других объектов, чтобы пользователь мог сразу увидеть их. Основываясь на этом тезисе, верстальщики всего мира решили использовать подчеркивание и изменение цвета при наведении.
Ссылка считается тоже активным элементом, поэтому их всегда подчеркивают. Стандартное подчеркивание осуществляется через свойство text-decoration. Из названия можно определить, что свойство отвечает за декорации текста, то есть его оформление. Если при этом свойстве будет стоять значение underline, то текст будет подчеркнут сплошной линией.
В последнее время отходят от такого формата подчеркивания, и все чаще на сайтах можно встретить подчеркивание ссылок пунктирной линией. Для осуществления такого подчеркивания свойство text-decoration уже не послужит. Для этого нужно обратиться к свойству border-bottom. Через него мы установим нижнюю границу для ссылки, которая и послужит нашим подчеркиванием. Чтобы сделать линию пунктирной, требуется указать стиль линии в этом свойстве. Пунктиру соответствует команда dashed. Но перед этим нужно не забыть убрать исходное подчеркивание, которое определяется браузером по умолчанию для ссылок. Для этого обращаемся все к тому же свойству text-decoration и прописываем для него значение none. Чтобы наша фишка применилась только к определенной группе ссылок — необходимо указать селектор класса. Код смотрим внизу
HTML
<p><a class="underline" href="#">Ссылка 1</a></p>
CSS
.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+ |
