使用 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;

      }
相关推荐
码农捻旧14 分钟前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina15 分钟前
前端面试之防抖节流(一)
前端·javascript·面试
浏览器API调用工程师_Taylor27 分钟前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤36 分钟前
Vue 高级视频播放器实现指南
前端
FogLetter1 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
小公主1 小时前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴1 小时前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子1 小时前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder1 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛1 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts