Ссылка пунктиром

В веб-дизайне часто прибегают к такому решению — подчеркивание ссылок пунктирной линией или точками. Такие ссылки обычно не совершают перехода на страницу, а открывают какой-либо скрытый слой. Например: на сайте expange.ru (если пользователь не авторизован) при нажатии на ссылку «Авторизация» открывается скрытый слой, на котором форма авторизации — удобно, быстро и без перезагрузки страницы (экономия трафика).

Подчеркивание черточкой

Подчеркивание черточками

<a href="/" style="text-decoration:none; border-bottom:#F00 1px dashed; color:#F00;"> Подчеркивание черточками </a>

Подчеркивание точками

Подчеркивание точками

<a href="/" style="text-decoration:none; border-bottom:#F00 1px dotted; color:#F00;"> Подчеркивание точками </a>

Примечание: В Internet Explorer 6 подчеркнуть точками не получится, выглядеть будет как подчеркивание черточкой.

Примечание

a:hover

Если при наведении ссылка меняет цвет, то не стоит забывать, что стандартное подчеркивание text-decoration:underline;, было изменено на text-decoration:none; и была установлена нижняя граница определенного цвета и стиля, поэтому, чтобы подчеркивание пунктиром тоже меняло свой цвет нужно делать так:

<style type="text/css"> a {color:#F00; text-decoration:none; border-bottom:#F00 1px dashed;} a:hover {color:#900; border-bottom-color:#900;} </style> <a href="http://expange.ru/">При наведении цвет изменится с #F00 на #900</a>

Свойство padding в ссылках

Если ссылка в стилях имеет свойство padding, например padding:5px 10px;, то наше нижнее подчеркивание ссылки будет на 5 пикселей отдалено от текста. Чтобы решить эту проблему нам понадобится «промежуточный тег»:

<style type="text/css"> a {color:#F00; text-decoration:none; padding:5px 10px;} a ins {text-decoration:none; border-bottom:#F00 1px dashed;} </style> <a href="http://expange.ru/"><ins>Используем промежуточный тег</ins></a>

Категории

Веб-дизайнHTMLВерстка

Комментарии

Anton Gorodishenin

А ссылка на авторизацию в самой статье перекидывает на другую страницу

Ответить
Богдан Сокольник

Спасибо за подсказку с промежуточным тегом. Это действительно решает проблему.

Ответить
Артём Фёдоров

Всегда пожалуйста.

Ответить
Nik Bin

давно искал спс

Ответить