Страница 1 из 11
Общий форум » Все для вебмастера » Начинающий Вебмастер » Стильно выделить ссылку при наведении курсора
Стильно выделить ссылку при наведении курсора
Kosten
Дата: Пятница, 17.11.2017, 23:02 | Сообщение 1
Администраторы
Сообщений:16015
Награды: 51


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

Здесь при наведение появится подчеркивание с левой по правую сторону.



HTML

Код
<a href="http://zornet.ru/">ZorNet: Создание сайта на uCoz</a>


CSS

Код
a { line-height: 1; display: inline-block; text-decoration: none; color: #118EC7; }
a:after {
    height: 2px; /* Толщина линии подчеркивания */
    display: block; content: "";
    background-color: #118EC7; /* Цвет линии подчеркивания */
    margin-top: 2px; width: 0;
    transition: width .2s ease-in-out; /* Скорость появления/исчезновения линии */
    }
a:hover:after,
a:focus:after {width: 100%;}
Прикрепления: 4953448.png(43Kb)
Страна: (RU)
Общий форум » Все для вебмастера » Начинающий Вебмастер » Стильно выделить ссылку при наведении курсора
Страница 1 из 11
Поиск: