Hover анимация линии

* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
 
ul{ 
    text-align: center; 
    padding: 15px; 
    font-size: 18px; 
    font-family: 'segoe ui', sans-serif; 
} 
ul>li{ 
    display: inline-block; 
} 
ul>li>a{ 
    display: block; 
    position: relative; 
    text-decoration: none; 
    color: #000; 
} 
ul>li>a:before, 
ul>li>a:after{ 
    content: ''; 
    position: absolute; top: 100%; 
    width: 15%; 
    height: 3px; 
    background: tomato; 
    transition: .3s; 
} 
ul>li>a:before{ 
     left: 50%;     
} 
ul>li>a:after{ 
    right: 50%;     
} 
ul>li>a:hover:before, 
ul>li>a:hover:after{     
    width: 50%;     
}

<ul> 
    <li><a href="#">Hover анимация линии</a></li> 
</ul>

$('p').on({ 
    'mouseenter':function(){ 
        $('hr').stop().animate({'width': '50px'},500); 
    },'mouseleave':function(){ 
        $('hr').stop().animate({'width': '10px'},500); 
    } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p align=center>Текст</p> 
<hr style="width:10px" />