Вы, разумеется, знаете, как выглядят ссылки по умолчанию: текст синего цвета с синим же подчеркиванием, одинаково изменяющие цвет при наведении указателя мыши. Есть и другой способ создать немного более интересный вид ссылок:

Создание необычных стилей для ссылок

Широко известный вид ссылок по умолчанию

Вид ссылок при использовании другого способа.

Обратите внимание на небольшой отступ у подчеркивания, который смотрится интересней.

Первая ссылка создана с помощью свойства нижней рамки и внутреннего отступа 1px для небольшого улучшения внешнего вида. Обратите внимание, текст меняет цвет при наведении указателя мыши, но цвет подчеркивания не меняется.

Код для первой ссылки:

a {
text-decoration: none;
border-bottom:1px #75abea solid;
padding-bottom: 1px;
}

Вторая ссылка создана примерно так же, как первая, но с ее помощью становится видно, что цвет текста и подчеркивания при наведении указателя мыши можно задавать раздельно.

Код для второй ссылки:

a:hover {
color: green;
border-bottom: 1px solid red;
}

Внешний вид третьей ссылки создан с помощью только фонового изображения.

Код для третьей ссылки:

a {
  text-decoration: none;
  background: url(link-line.gif) repeat-x 0 100%;
  padding-bottom: 1px;
}

Если задать фону расположения по оси X 0, а по оси Y 100%, фоновое изображение будет расположено в самом низу текста, а если добавить внутренний отступ 1px,  то расстояние между текстом и фоновым изображением станет 1px.

Так как часть людей отключают изображения, например, для экономии трафика, то использование свойства нижней рамки для создания подчеркивания может быть предпочтительней. Но использование фонового изображения дает нам больше возможностей для создания уникальных стилей и создания эффектов, как показано в примере на четвертой ссылке, в которой к используемому изображению применен градиент. Также возможно задать стили для состояния ссылки при наведении указателя мыши с помощью изображения.

Посмотрите, как работают все четыре ссылки и их код CSS в подробностях:

Скачать исходный код

Автор урока Volkan Görgülü

Перевод — Дежурка

• Смотрите также:
• Использование фона у тега body
• Создание многострочного градиентного фона для текста
• Создание заголовков с линиями по краям