html - 为什么我不能对 border-left 使用相同的动画？

Question

我正在尝试使用从中心开始的 border-left 进行悬停效果...在网络搜索器之后，我只能找到如何做下划线

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>

当我尝试将 scaleX 更改为 Y 和 border-left 时，我根本没有得到任何结果，没有边框...也许我做错了什么..

Answer 1

因为你想要一个左边框，首先你必须切换到 :before 而不是 :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>