需要实现一个边框长度比容器长度小一些的边框时,以往大多数都是使用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 : 28 rpx;
border-bottom : 2 rpx solid #F1F1F1 ;
text-align : center ;
height : 88 rpx;
line-height : 88 rpx;
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 : 6 rpx;
width : 100 rpx;
background-color : #4876F9 ;
left : 50% ;
transform: translateX( -50% );
}
|
最后两句是控制边框居中的问题。