伪元素制作自定义边框

红框圈出来的蓝色下边框这种效果

<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;
}