How to build menu border animation using html & css

Today i build an Animated menu using html and CSS. I've tried to do something new, the border will be slightly animated when the mouse hover over it. No javascript used here. Just use CSS. 

Step 1: HTML

<ul class="">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Our Team</a></li>
<li><a href="">Contact</a></li>

Step 2: CSS

  margin: 0;
  padding: 0;
  background-color: #295;
  font-family: sans-serif;
  margin: 100px auto;
  width: 80%;
ul li{
  list-style-type: none;
  float: left;
  border-right: 1px solid rgba(0,0,0,0.2);
ul li:last-child{
border: none;
ul li a{
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  background-color: #15aff0;
  position: relative;
ul li a:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 25px;
  width: 50%;
  height: 2px;
  background-color: #114d4d;
  transition: .6s;
ul li a:hover:before{
  content: '';
  width: 100%;
  left: 0;