Иногда бывает необходимость придать вашему сайту некоторую динамику. Мне очень нравится динамическое подчеркивание ссылок при наведении, сделанное при помощи чистого CSS. Плюсы здесь чисто визуальные эффекты для пользователя и простота исполнения, которая не будет тормозить загрузку вашего сайта.
Пример можно посмотреть здесь:
See the Pen ПОДЧЕРКНУТАЯ ССЫЛКА(abcinblog) by YaroslavW (@YaroslavW) on CodePen.
код очень простой:
HTML
<h2><a href="#">It is underlined link</a></h2>
CSS
h2 > a {
position: relative;
text-decoration: none;
color:#000;
}
h2 > a:hover {
color: red;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: green;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: sczlaX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Для того, чтобы вам было проще ориентироваться в коде, что там за что отвечает и пр., я выделил все разными цветами.
