Главная » Эффекты для сайта » Эффект плавного подчеркивания ссылки с помощью CSS3

Эффект плавного подчеркивания ссылки с помощью CSS3

2016-06-02 / Вр:00:37 / просмотров: 8951

Всем привет!
Позвольте вам продемонстрировать эффект для ссылок. При наведении на ссылку курсора, ссылка плавно подчеркнется слева направо или наоборот справа налево.
Эффект красивый и простой, так как используется CSS3.
Буду осуществлять эффект с помощью псевдоэлемента «:after» и свойства «transition».
Предлагаю посмотреть демонстрацию эффекта:

[смотреть демонстрацию]

Как вам эффектик для ссылок?

=> эффект плавного подчеркивания ссылки слева направо

В HTML:

<a href="#" class="underline">Наведи курсор!</a>

CSS:

.underline {
position: relative;
color: #ff3296;
cursor: pointer;
font-size: 24px;
}
.underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #980044;
content: "";
transition: width 0.2s;
}
.underline:hover {
color: #980041;
}
.underline:hover:after {
width: 100%;
}

=> эффект плавного подчеркивания ссылки справа налево

Достаточно заменить строку №10 «left: 0;» на «right: 0;»

CSS:

.underline {
position: relative;
color: #ff3296;
cursor: pointer;
font-size: 24px;
}
.underline:after {
display: block;
position: absolute;
right: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #980044;
content: "";
transition: width 0.2s;
}
.underline:hover {
color: #980041;
}
.underline:hover:after {
width: 100%;
}