Как сделать такой хитрый hover для border'a? - Готовые рецепты и советы

.nav-item:before{
	transition: 1s; 
	display:block; 
	border-left: 4px solid #000; 
	content:""; 
	position:absolute; 
	width:0px;  
	height:0px; top:32px	
	}
.nav-item:hover:before{top:24px;height:20px;}

a:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 100%;
  bottom: 0px;
  left: -4px;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

a:hover:before {
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}