Как добавить пунктирное подчеркивание к ссылкам?

🕛 22.01.2009, 23:32

Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без ее перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.
Для создания линии следует использовать атрибут border-bottom со значением dashed, добавляя его к селектору A. Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot. Также необходимо убрать исходное подчеркивание у ссылок с помощью атрибута text-decoration со значением none (пример 1).

Пример 1. Пунктирное подчеркивание

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пунктирное подчеркивание</title> <style type="text/css"> A.dot { text-decoration: none; /* Убираем подчеркивание */ border-bottom: 1px dashed #000080; /* Добавляем свою линию */ } A.dot:hover { color: #f00000; /* Цвет ссылки при наведении на нее курсора */ } </style> </head> <body> <p><a href="link.html">Обычная ссылка</a> на другую страницу.</p> <p><a href="#" class="dot">Ссылка с пунктирным подчеркиванием</a>.</p> </body>
</html>