[CSS] 마우스 hover 시 line transition

<ul class="menu">
  <li class="list">menu_01</li>
  <li class="list">menu_02</li>
  <li class="list">menu_03</li>
  <li class="list">menu_04</li>
</ul>

.menu{list-style:none; padding:0}
.list{margin-right:10px; display:inline; cursor:pointer; position:relative;}
.list:before{width: 0%;
    transition: width 0.3s;
    transform: translateX(-50%);
    position: absolute;
    bottom: -6px;
    left: 50%;
    height: 1px;
    background: #ff755e;
    content: '';
    display: block;}
.list:hover::before{width:100%; transition: width 0.3s;}

마우스 hover 시 아래 라인생성

동작 상세
https://codepen.io/leechaewon/pen/bGYBZWw