Эффект подчёркивания при наведении на ссылку

Эффект подчёркивания при наведении на ссылку

Создадим на сайте красивый эффект подчёркивания ссылок при наведении на них курсором. Необходимо только поменять цвет ссылок и цвет линий подчёркивания. Вот как работает данный код:

Копируем в CSS вашей темы следующий код:

/*Эффект подчёркивания ссылок при наведении курсора*/
a {
text-decoration:none; 
display: inline-block;
line-height: 1;
color:#1d70a3;/*Задаём цвет ссылки*/
}

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

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

a:hover{
  color:#225384;
}

Готово!

0

Автор публикации

не в сети 3 часа

FSM

777
Высшая ступень членства компании AitThemes - Agency Multi Membership
Комментарии: 7Публикации: 452Регистрация: 28-06-2021