红框圈出来的蓝色下边框这种效果
<view class="active">
<text>我的赞</text>
</view>
<view>
<text>我的收藏</text>
</view>
<view>
<text>我的评论</text>
</view>
<view>
<text>我的关注</text>
</view>
.active{
/*要给active一个相对定位 然后给伪元素绝对定位 这样伪元素才能根据active来定位*/
position: relative;
}
.active:after {
/*content 可为空 必须写这句*/
content: '';
/*设置margin: 0 auto; 加上相对定位的left和right都为零 可让伪元素在active中水平居中*/
margin: 0 auto;
position: absolute;
bottom: -14rpx;
left: 0;
right: 0;
height: 3px;
width: 22px;
background-color: #2e84ed;
}