我正在尝试使用从中心开始的 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
时,我根本没有得到任何结果,没有边框...
也许我做错了什么..
最佳答案
因为你想要一个左边框,首先你必须切换到 :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>
关于html - 为什么我不能对 border-left 使用相同的动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36409633/