css的伪类before的使用

最新推荐文章于 2025-06-08 14:44:46 发布

原创最新推荐文章于 2025-06-08 14:44:46 发布 · 712 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用CSS的:before伪元素来为“最新”标签添加视觉效果的方法。通过简单的HTML结构配合CSS样式，特别是通过对.active类的:before伪元素进行定位和样式设置，可以轻松实现一个带有左侧竖标识的标签效果。

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

首先我们还是先上效果图：

看我我在最新New之前利用before伪类加了一个竖标识；

直接上代码：

结构如下：

<view class="new {{newSelect?'active':''}}" @tap="choseNew">
              最新<image src="../../images/index/new.png"/>
            </view>

css如下：

 .active{
          position: relative;
          color: #F25664;
          background-color: #f5f5f5;
          &::before{
          content: ' ';
          width: 8rpx;
          height: 24rpx;
          background-color: #F25664;
          left: 0;
          top: 30rpx;
          position: absolute;
        }
      }