2015
01
Сент

Подчёркивание ссылки при наведении



Подчёркивание ссылки


Подчеркивание выделяет ссылки в тексте и обращает внимание посетителя. Оформлять ссылки можно разными способами, проявив фантазию.

Используя CSS и псевдо- класс :hover можно интересно оформить скучные ссылки, создать довольно интересный эффект.

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

Интересно то, что HTML изменять нужно. Достаточно применить свойства CSS.

Используя свойство line-height: устанавливаем межстрочный интервал от базовой линии шрифта. Ссылку сделаем блочно-строчной в структуре текста. Зададим свойство display со значением inline-block. Вместо подчеркивания применим заливку ссылки цветом. Для этого используем свойство text-decoration:none;.


a { line-height: 1; display: inline-block; color:#03C; text-decoration:none; cursor: pointer; }

Используя псевдоэлемент :after, можно добавить элемент в виде линии, задать эффект перехода transition:. Ширину линии выбираем с нулевым значением width: 0%;, высота – 2px. Цвет линии для наглядности возьмем красный.

a:after { display: block; content: ""; height: 2px; width: 0%; background-color: #F00; transition: width .3s ease-in-out; }

Оживить ссылку можно при помощи псевдоклассов :hover и :focus. Стиль ссылки определит :hover , :focus заработает при наведении курсора. Ширину зададим 100%. Время задержки подчеркивания определит свойство transition:.

a:hover:after, a:focus:after { width: 100%; }

И вот результат.

Наведите курсор на ссылку и вы увидите результат.

CSS полностью

a:after { display: block; content: ""; height: 2px; width: 0%; background-color: #F00; transition: width .3s ease-in-out; } a:after { display: block; content: ""; height: 2px; width: 0%; background-color: #F00; transition: width .3s ease-in-out; } a:hover:after, a:focus:after { width: 100%; }

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


Успехов Вам!