CodePen Embed

<ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
  <li>list4</li>
  <li>list5</li>
</ul>

ul{list-style:none;}
li{position:relative; width: 150px; line-height:30px; height:30px; text-align:center; margin-bottom:10px;}
li:after{
  content:''; 
  display: block;       
  position:absolute; 
  top:0; left:50%;
  width:0%; height: 30px; 
  box-sizeing: border-box; 
  border-bottom: 1px solid red;
transition: width 0.5s, left 0.5s;}
li:hover:after{width:100%; left:0;}

This Pen is owned by gahyun on CodePen.

See more by @gahyun on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.