如何使用::after伪元素实现tab栏底部线条
如何使用::after伪元素实现tab栏底部线条
废话不多说,直接上代码
<a class="common-tab-item" :class="currentView==1?'current':''" @click="tabToggle2(1)">净值趋势</a>
<a class="common-tab-item" :class="currentView==2?'current':''" @click="tabToggle2(2)">历史收益率</a>
&.current {
color: #5997f1;
position: relative;
}
&.current::after {
content: ''; // 必须
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 54px;
height: 6px;
background-color: #5997f1;
}
效果如图