border-leftに同じアニメーションを使用できないのはなぜですか？

Question

私はウェブで探索した後、私はときにのみ

ul.sub_menu li a:after { 
 
\t display:block; 
 
    \t content: ''; 
 
    \t border-bottom: solid 3px #019fb6; 
 
    \t transform: scaleX(0.0001); 
 
    \t transition: transform 250ms ease-in-out; 
 
} 
 
ul.sub_menu li a:hover:after { 
 
\t 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>

を強調行う方法を見つけることができる ...中心から始まりボーダー左とホバー効果をやろうとしています私はまったくの結果を取得しないYとborder-leftにscaleXを変更しようと、 はたぶん私は何か間違ったことをやっている何の国境ません... ..

Answer 1

あなたがワンので、左側の境界線では、まずに、:afterには切り替える必要があります。次に、要素の高さを設定して、実際に罫線ができるようにする必要があります。それ以外の場合、コンテンツは空であり、サイズは空です。

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>