纯css实现tab导航栏下划线

 

<div class="title">
      <span>基础信息</span>
</div>
 .title {
    position: relative;
    height: 40px;
    line-height: 40px;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #f2f4fe;
    }

    span {
      display: inline-block;
      position: relative;
      padding: 0px 5px;
      font-size: 18px;
      color: #3d3d3d;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: #409eff;
        z-index: 1;
      }
    }
  }

相关推荐

  1. css折叠的导航

    2024-05-16 15:24:06       12 阅读
  2. js实现tab切换

    2024-05-16 15:24:06       34 阅读
  3. css实现文字下划线动效

    2024-05-16 15:24:06       41 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-05-16 15:24:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-16 15:24:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-16 15:24:06       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-16 15:24:06       20 阅读

热门阅读

  1. 自定义一个starter

    2024-05-16 15:24:06       12 阅读
  2. ESP32 Arduino 定时器中断

    2024-05-16 15:24:06       14 阅读
  3. vue3-响应式API(工具函数)-unRef

    2024-05-16 15:24:06       12 阅读
  4. 【数据库】高并发场景下的数据库开发注意要点

    2024-05-16 15:24:06       14 阅读
  5. 什么是Vue.js? Vue.js简介

    2024-05-16 15:24:06       10 阅读