JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="link-hover-center">
    <span style="font-size:15pt"><a href="#">Подключить к анимации </a> <a href="#">Ссылка кнопок</a></span>
</div>

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%;
}