Анимация с подчёркивающей линией у ссылки CSS

Анимация с подчёркивающей линией у ссылки CSS

Анимация с подчёркивающей линией у ссылки CSS подойдет как для ссылок, так и для заголовков и текста. Необходимо будет обернуть ссылку в дополнительный див, чтобы задать ему нужные свойства.

Пример

Lorem Ipsum

HTML


<div class="link-ease-in-out">
    <a href="#" title="Lorem Ipsum">Lorem Ipsum</a>
</div>

CSS


.link-ease-in-out a {
    display: inline-block;
    color: #00bfff; /* Цвет обычной ссылки */
    line-height: 1;
    text-decoration: none; /* Убираем подчеркивание */
    cursor: pointer;
}
.link-ease-in-out a:after {
    background-color: #f66d52; /* Цвет линии при наведении на нее курсора мыши */
    display: block;
    content: "";
    height: 2px; /* Высота линии */
    width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}
.link-ease-in-out a:hover:after,
.link-ease-in-out a:focus:after {
    width: 100%;
}
By julia