使用 CSS : 伪元素:after、过渡动画transition实现过渡效果(鼠标悬浮或点击 标签时,底部边框从左到右过渡)

首先,给 <span> 标签添加一个父元素,定义属性类名:nav-wrapper ,父级设置相对定位。然后,使用 ::after 伪元素来创建一个与底部边框相同宽度的元素,初始时宽度为 0,通过过渡动画transitio n逐渐增加宽度,从而实现从左到右的过渡效果。

html 复制代码
 <div class="nav-wrapper">

     <span class="nav" :class="$route.fullPath === '/companyProducts' ? 'active' : ''">公司产品</span>

</div>
javascript 复制代码
.nav-wrapper {
  position: relative;
}

.nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: red;
  transition: width 0.3s ease;
}

.nav:hover::after,
.nav:focus::after {
  width: 100%;
}

//当前路由样式
.active {
        color: #cd1e19;
        font-weight: 700;

      }
相关推荐
亿坊电商1 分钟前
VUE混合开发,选哪个PHP框架最顺手?
前端·vue.js·php
新人11yj49 分钟前
如何给网页增加滚动到顶部的功能
前端·javascript
掘金一周10 分钟前
Figma Dev Mode MCP:大人,时代变了 | 掘金一周7.10
前端·人工智能·mcp
Data_Adventure14 分钟前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas
我爱加班、、28 分钟前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
香香甜甜的辣椒炒肉33 分钟前
vue快速上手
前端·javascript·vue.js
b1gbrother1 小时前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物1 小时前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户2519162427111 小时前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny1 小时前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试