Как сделать чтобы border при наведении появлялся слева направо, когда убираю курсор, исчезал тоже слева направо?

бордер чего?
https://codepen.io/gomoto27/pen/yYoqaa

Появляется и исчезает из одной точки
Пявляется и исчезаяет из противоположных точек

Вот так:
a {
position: relative;
color: #00a650; /*задаём цвет ссылки*/
cursor: pointer;
line-height: 1; /*задаём высоту строки*/
text-decoration: none; /*убираем подчёркивание*/

}
a:after {
display: block;
position: absolute;
left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
width: 0;/*задаём длинну линии до наведения курсора*/
height: 2px; /*задаём ширину линии*/
background-color: #00a650; /*задаём цвет линии*/
content: "";
transition: width 0.3s ease-out; /*задаём время анимации*/
}

a:hover:after,
a:focus:after {
width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}