<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 시 아래 라인생성