CSS使用伪类控制边框长度的方法

需要实现一个边框长度比容器长度小一些的边框时，以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果，并且使用起来很方便，下面通过本文给大家介绍CSS使用伪类控制边框长度的方法，感兴趣的朋友一起看看吧

前言：

如图： 我们需要实现一个边框长度比容器长度小一些的边框时，以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果，并且使用起来很方便。

这里使用的是微信小程序编写的， 所以标签会是view,和html不冲突

html：

1 2 3 4

<view class="swiper-tab">   <view class="swiper-tab-item {{currentTab=='1'?'active':''}}" data-current="1" bindtap="clickTab">安全帽监控</view>   <view class="swiper-tab-item {{currentTab=='2'?'active':''}}" data-current="2" bindtap="clickTab">危险区域监控</view> </view>

css：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.swiper-tab {     width: 100%;     font-family: PingFangSC-Medium;     font-size: 28rpx;     border-bottom: 2rpx solid #F1F1F1;     text-align: center;     height: 88rpx;     line-height: 88rpx;     display: flex;     flex-flow: row;     justify-content: space-between;     background: #ffffff } .swiper-tab-item {     width: 50%;     color: #252627 } .active {     color: #4876F9;     font-weight: bold;     position: relative; }

上面都是页面的基础样式， 想要实现边框的长度控制， 就需要使用:after
伪类css：

1 2 3 4 5 6 7 8 9 10

.active:after {     content: '';     position: absolute;     bottom: 0;     height: 6rpx;     width: 100rpx;     background-color: #4876F9;     left: 50%;     transform: translateX(-50%); }

最后两句是控制边框居中的问题。