Menu multiline underline animation

by PhilQ

HTML

<ul>
	<li><a href="">Link #1</a></li>
	<li><a href="">Link #2</a></li>
	<li><a href="">Link #3 with a unneeded, extend, very very long label text</a></li>
	<li><a href="">Link #4</a></li>
	<li><a href="">Link #5</a></li>
</ul>

SCSS

ul {
	width: 150px;
}

a {
	color: darkblue;
	text-decoration: none;
	background-image: linear-gradient(currentColor,#000);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.7s ease 0s;

	&:hover {
		background-size: 100% 2px;
	}
}