Существует несколько способов выделения ссылок. И хотя как бы не советовали ученые мужи оставлять ссылки в их первоначальном девственно-синем цвете, большая часть населения сети этот совет игнорируют. А посему и мы исключением не будем.

Начнем, пожалуй со стандарта. Существует четыре состояния ссылки:

• link - состояние покоя
• visited - посещенная ссылка
• active - активная, т.е. выделенный мышкой, но с убранным с него курсором. Возможно видели этакие повисшие вокруг ссылок или картинок “рамочки” выделения - вот это оно и есть.
• hover - (перевод. как “парение”) - реакция ссылки при наведении

Однако, обойдемся двумя: link и hover. Нам нужны два параметра:

1. цвет (color)
2. и т.н “украшательство” (text-decoration)

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

Для первого случая выход очевиден - нам нужно два состояния ссылки:

a:link {color:#0A9DDC; text-decoration:underline;}
a:hover {color:#DE0717; text-decoration:none;}

Нестандартное подчеркивание

Для нестандартного подчеркивания достаточно добавить линию другого цвета

a:link {color:#0A9DDC; text-decoration:none;}
a:hover {color:#DE0717; text-decoration:none; border-bottom: #A4A4A4 1px solid;}

Меняем фон

Кроме того, можно изменить и сам фон ссылки:

a:link {color:black; text-decoration:none; background-color:none;}
a:hover {color:black; text-decoration:none; background-color:#A4A4A4;}

Еще пару моментов

Чтобы создать свой! вид подчеркивания можно прикрепить к ссылке какой-нибудь картинк:

background-image: url(underline.gif);

А если надо чтобы картинка растягивалась только в ширину (например, это может быть двух пиксельная картинка с черным и красным пикселом), необходимо ограничить повтор фона

background-image: url(underline.gif);