使用 :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僞類充滿了恐懼,不會用,今天一看感覺也就那樣,好了
佛唉挺!