<a class="link1" href="#">Ссылка 1</a>a.link1 {
position: relative;
outline: none;
text-decoration: none;
display: inline-block;
color: black;
z-index: 1;
padding: 0 1px;
transition: color ease 0.3s;
}
a.link1::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 5%;
left: 0;
bottom: 0;
background-color: green;
transition: all ease 0.3s;
}
a.link1:hover {
color: white;
}
a.link1:hover::after {
height: 100%;
}