<ul>
<li>
<a href="https://">メニュー</a>
</li>
</ul>

ul {
list-style: none;
}
li {
width: 140px;
text-align: center;
position: relative;
}
li a {
font-family:YuGothic, "Yu Gothic Medium", "Yu Gothic", sans-serif;
color: inherit;
display: block;
font-size: 20px;
line-height: 40px;
height: 40px;
padding: 0 20px;
transition: .5s;
letter-spacing: 1px;
text-decoration: none;
}
li a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: center top;
transition: transform 0.3s;
}
li a:hover::after {
transform: scale(1, 1);
}
li:hover a:after {
transition: .5s;
}