CSS使用伪类控制边框长度

最新推荐文章于 2024-03-02 16:09:14 发布

原创最新推荐文章于 2024-03-02 16:09:14 发布 · 4.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端 #css伪类

CSS/CSS3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在微信小程序中利用CSS伪类`:after`创建动态边框，避免了传统div嵌套的方法。通过设置`.active:after`的样式，实现了边框长度可控制并居中对齐的效果，简化了代码并提高了效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

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

这里使用的是微信小程序编写的，所以标签会是view,和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;
}

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

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