Why I can't use same animation for border-left?

Question

I'm trying to do a hover effect with border-left that starts from center... After searcher in the web I could only find how to do underline

ul.sub_menu li a:after {
	display:block;
  	content: '';
  	border-bottom: solid 3px #019fb6;  
  	transform: scaleX(0.0001);  
  	transition: transform 250ms ease-in-out;
}
ul.sub_menu li a:hover:after {
	transform: scaleX(1);
}

 <ul class="list-unstyled sub_menu" role="tablist">
    
    <li  role="presentation" class="active">
<a href="#head" ria-controls="header" role="tab" data-toggle="tab">Header</a></li>
    
    <li  role="presentation">
<a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>

when I try to change scaleX to Y and border-left I get no results at all, no border... Maybe I'm doing something wrong..

Answer 1

Since you want a left border, first you have to switch to :before and not :after. Then you need to set a height for the element so that it can actually have a border. Otherwise content is empty and size is empty. So you can do this:

ul.sub_menu li a:before {
    display:inline-block;
    content: '';
    border-left: solid 3px #019fb6;  
    transform: scaleY(0.001);  
    transition: transform 250ms ease-in-out;
    height:1em;
}
ul.sub_menu li a:hover:before {
    transform: scaleY(1);
}

<ul class="list-unstyled sub_menu" role="tablist">

    <li  role="presentation" class="active">
<a href="#head" ria-controls="header" role="tab" data-toggle="tab">Header</a></li>

    <li  role="presentation">
<a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>