gradient로 nav밑줄 animation 구현하기

<nav>
  <ul>
    <li><a href="#javascript:;">파인애플</a></li>
    <li><a href="#javascript:;">아보카도</a></li>
    <li><a href="#javascript:;">블루베리</a></li>
    </li>
    <li><a href="#javascript:;">골드키위</a></li>
  </ul>
</nav>

*{margin:0; padding:0; text-decoration:none}
:is(ul, li) {list-style:none;}
nav {width:500px;}
ul {display:flex; justify-content:center;}
ul li {margin:10px;}
ul li a{ transition:.5s; background:linear-gradient(slateblue,slateblue)no-repeat bottom/0 2px;}
ul li a:hover, ul li a:focus {background-size:100% 2px; }

background:linear-gradient를 이용하면 script를 사용하지않아도 transition을 이용해 이런 간단한 애니메이션을 구현 할수있다. 참고하도록하자.