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

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

Выполняется он на чистом CSS, через псевдо-элемент.

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

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

Для примера возьмём простую HTML конструкцию - родительский div-элемент, внутри которого идут ссылки в виде тега <a></a>: HTML-код:

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

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

a::after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    background-color: #ff6000;
    transition: width .3s ease-in-out;
}
a:hover::after,
a:focus::after {
    width: 100%;
}

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

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

Демо:

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

a {
    position: relative;
    color: #07aa19;
}
a::after {
    display: block;
    content: "";
    background-color: #07aa19;
    height: 3px;
    width: 0;
    left: 50%;
    position: absolute;
    transition: width .3s ease-in-out;
    transform: translateX(-50%);
}
a:hover::after,
a:focus::after {
    width: 100%;
}

Так же это можно реализовать с помощью CSS-функции scaleX которая изменяет размер элемента по оси x (по горизонтали) для свойства transform. Получится:

a {
    position: relative;
}
a:focus {
    outline: 0;
}
a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ff6000;
    transform: scaleX(0);
    transition: transform 0.4s ease-in-out;
}
a:hover::after,
a:focus::after {
    transform: scaleX(1);
}