使用 :after 伪类
超级好用
html代码:
<ul class="type-list">
<li :class="active===i?'type-list-item active':'type-list-item'" v-for="(item,i) in listData" :key="i"
@click="active=i">{{item.title}}</li>
</ul>
css代码:
.type-list-item{
font-size:26px;
font-weight:400;
width:100px;
height:23px;
color:rgba(0,0,0,1);
text-align: center;
position: relative;
}
.active{
color: #E4262D;
&:after {
content: '';
position: absolute;
bottom: -15px;
top: auto;
left: 40px;
height: 3px;
width: 22px;
background-color: #E4262D;
}
}
效果图:
对于其他位置的border效果只需修改
宽度,高度,定位
以前我对这个:after伪类充满了恐惧,不会用,今天一看感觉也就那样,好了
佛唉挺!