Using the transition method is a simpler approach with fewer potential problems. I have made some adjustments to your fiddle to incorporate this method:
https://jsfiddle.net/6t8xLssv/1/
In this version, I have applied the transition to the :before element on hover, with the exception of the active li.
li:before{
content:'';
display:inline-block;
position:absolute;
bottom:0;
right:0;
left:0;
height:0;
transition:height 0.2s linear;
background:pink;
border-radius:5px 5px 0 0;
z-index:-1;
}
li:hover:before{
transition:height 0.2s linear;
height: 2em;
}
li.active:before{
display:none;
}
I trust this modification will be beneficial to your project.