【前端】【css】伪元素定位

最新推荐文章于 2025-12-05 20:35:03 发布

原创最新推荐文章于 2025-12-05 20:35:03 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

前端专栏收录该内容

4 篇文章

订阅专栏

需求

在这里插入图片描述

实现

    <view class="intent-container">
      <text
        class="user-intent {{selectedType === 'real' ? 'active' : ''}}"
        catchtap="switchIntent"
        data-type="real"
      >真题</text>
      <view style="height: 48rpx;width: 2rpx;background-color: rgba(173,202,248,0.4);"></view>
      <text
        class="change-intent {{selectedType === 'sim' ? 'active' : ''}}"
        catchtap="switchIntent"
        data-type="sim"
      >模拟题</text>
    </view>

/* 意图切换 */
.intent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eff5fd;
  height: 96rpx;
  font-size: 32rpx;
  color: #666666;
  border-radius: 32rpx 0 0;
}

/* 每个文字容器 */
.intent-container text {
  flex: 1;
  text-align: center;
  position: relative; /* ✅ 新增，伪元素定位参照它 */
  padding: 18rpx 0;
  font-size: 28rpx;
  color: #666;
}

/* 激活状态 */
.intent-container .active {
  color: #333;
  font-weight: 600;
}

/* ✅ 下划线伪元素修正 */
.intent-container .active::after {
  content: '';
  position: absolute;
  bottom: 0rpx;                  /* 紧贴文字底部 */
  left: 50%;
  transform: translateX(-50%);
  width: 50rpx;                  /* 下划线宽度 */
  height: 4rpx;
  border-radius: 4rpx;
  background-color: #4787F0;
  transition: all 0.3s ease;
}