CSS эффект подчёркивания от центра и слева направо

Хочу сегодня поделиться с вами не сложным, но очень популярным и часто встречаемым на сайтах CSS эффектом.

Данный эффект - это плавно появляющаяся подчёркивающая линия, которая появляется при наведении на ссылку или пункт меню. Но этот эффект можно применять не только для ссылок или пунктов меню, но и для чего угодно: для заголовков и названий, отдельных частей текста, иконок, картинок и т.д.

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

Линия появляющаяся слева направо

Первый CSS эффект который я покажу, это плавно появляющаяся слева направо подчёркивающая линия.

Демо - наведите курсор на один из пунктов ниже:

Для примера я взял простую по html конструкцию - родительский элемент с классом link-hover-solid, внутри которого идут ссылки - a. Как правило, по такому же принципу устроено меню на сайтах с его пунктами.

HTML-код:

<div class="link-hover-solid">
    <a href="#">Пункт-1</a> <a href="#">Пункт-2</a>
</div>

CSS-код отвечающий за анимацию:

.link-hover-solid a {
    display: inline-block;
    color: #76431f;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.link-hover-solid a:after {
    background-color: #ff6000;
    display: block;
    content: "";
    height: 3px;
    width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}
.link-hover-solid a:hover:after,
.link-hover-solid a:focus:after {
    width: 100%;
}

Подчёркивающая линия появляющаяся из центра

Этот эффект особо популярен для пунктов главного горизонтального меню на сайте.

Демо:

CSS-код эффекта:

.link-hover-center a {
    display: inline-block;
    color: #07aa19;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}
.link-hover-center a:after {
    display: block;
    content: "";
    background-color: #07aa19;
    height: 3px;
    width: 0%;
    left: 50%;
    position: absolute;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
.link-hover-center a:hover:after,
.link-hover-center a:focus:after {
    width: 100%;
}

Чтобы внедрить данные эффекты у себя на сайте, нужно просто поменять в CSS-коде классы родительского элемента, на классы со своего сайта.

Если у вас есть вопросы - смело задавайте их в комментариях.