Как сделать подчеркивание ссылки пунктиром (css)
Как правило, ссылки подчеркиваются в HTML сплошной чертой, т.к. это является общепринятым стандартом и привычно для пользователей. Однако, если ваш дизайн сайта требует вместо сплошной черты — пунктир, то это вполне приемлемо. Ниже вы узнаете, как сделать подчеркивание ссылки пунктиром с помощью css.
Вот пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Как сделать подчеркивание ссылки пунктиром</title> <style> a.dot-link { text-decoration: none; border-bottom: 1px dashed #000080; } a.dot-link:hover { text-decoration: underline; border-bottom: 0px; } </style> </head> <body> <a href="http://poleshuk.ru" class="dot-link">Мой сайт</a> </body> </html> |
Здесь мы создали простой html-файл отображающий ссылку, которой мы присвоили класс «dot-link». В style мы включили стили для этого класса для ссылки в обычном состоянии и при наведении. Главным здесь является свойство «dashed», которое и отображает пунктир. Обратите внимание, что мы убрали нижнее подчеркивание строчкой:
1 |
text-decoration: none; |
но при наведении (hover) мы его возвращаем.
Категория: HTML, Используем CSS