Как сделать появляющуюся черту с анимацией в CSS?

еще как вариант использовать box-shadow: inset - внутренюю тень.
либо без наведения - padding, при - убирать padding и добавлять border

Часть кода css для навигации:

/*all statement*/

.navbar-nav > li > a {
	color: #fff;
	font-size: 15px;
	font-family: 'Myriad Pro';
	color: rgb( 255, 255, 255 );
	text-transform: uppercase;
	padding-top: 35px;
	display: inline-block;

}

.navbar-default .navbar-nav > li > a {
	color: #fff;
	 -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

/*active statement*/

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	background: none;
	color: #fff;
	padding-top: 30px;
	border-top: 5px solid #fff;

}

/*hover statement*/

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	background: none;
	color: #fff;
	padding-top: 30px;
	border-top: 5px solid #fff;
}

Делам две полосы, одна в лево выдвигается , другая в право с замедлением за это отвечает animation-timing-function: ease;




/---------/
.hr__w{
width: 100%;
max-width: 1760px;
margin-left: 17%;
padding: 0px 0 0px;
position: relative;

}
.animation__left{
animation-name: move_l;
animation-duration: 4s;
animation-timing-function: ease;
}
@keyframes move_l {
0%{
right: -100%;
}
100%{
margin-right: 20px;}
to {
right: 0%;
}
}

.animation__right{
animation-name: move_r;
animation-duration: 3s;
animation-timing-function: ease;
}

.hr__w2{
width: 100%;
max-width: 1760px;
margin-right: 7%;
padding: 0px 0 0px;
position: relative;

}
@keyframes move_r {
0%{
left: -100%;
}
100%{
margin-right: 20px;}
to {
left: 0%;
}
}
(чтобы повторно выехала при косании)
.animation__right:hover {
animation-name: none;
}