Линии при наведении на ссылку в меню

a { 
  display: inline-block; 
  position: relative; 
  padding: 13px; 
  text-transform: uppercase; 
  background: gray; 
  color: white; 
  text-decoration: none; 
} 
 
a:before, 
a:after { 
  content: ''; 
  position: absolute; 
  width: 30px; 
  height: 3px; 
  margin-left: 50%; 
  left: -15px; 
  background: transpartent; 
  transition: background .4s; 
} 
 
a:before { 
  top: 0 
} 
 
a:after { 
  bottom: 0 
} 
 
a:hover:after, 
a:hover:before { 
  background: purple; 
}

<a href="#">Ссыль</a>

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
} 
 
html, 
body { 
  padding: 40px; 
} 
 
li { 
  display: inline-block; 
  height: 50px; 
  line-height: 50px; 
  padding: 20px; 
  position: relative; 
} 
 
li a { 
  display: block; 
} 
 
li:after { 
  content: ""; 
  display: block; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  border-top: 1px solid transparent; 
  border-bottom: 1px solid transparent; 
  transition: 0.35s; 
} 
 
li:hover a { 
  color: blue; 
  animation: scale 0.3s steps(10); 
} 
 
li:hover:after { 
  animation: circle 0.3s steps(10); 
  border-top: 4px solid blue; 
  border-bottom: 4px solid blue; 
} 
 
@keyframes circle { 
  100% { 
    border: 1px solid blue; 
    border-radius: 50%; 
    transform: rotate(360deg)scale(0.1); 
  } 
} 
 
@keyframes scale { 
  50% { 
    transform: scale(0.7); 
  } 
  50% { 
    transform: scale(0.3); 
  } 
}

<li><a href="">ссылка</a></li> 
<li><a href="">ссылка</a></li> 
<li><a href="">ссылка</a></li>