How to control border length using CSS pseudo-classes

When you need to implement a border whose length is smaller than the length of the container, most people use div nesting in the past. Now you only need to use pseudo-classes to achieve this effect, and it is very convenient to use. In this article, I will introduce to you how to use CSS pseudo-classes to control the border length. Friends who are interested should take a look.

Foreword:

As shown in the figure:  When we need to implement a border whose length is smaller than the length of the container, most of us use div nesting in the past. Now you only need to use pseudo-classes to achieve this effect, and it is very convenient to use.

What is written here is the WeChat applet, so the label will be view, which does not conflict with html.

html：

<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：

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

The above are the basic styles of the page. If you want to control the length of the border, you need to use :after
pseudo-class css:

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

The last two sentences are about controlling the centering of the border.