css 实现鼠标上移添加下划线

效果图

实现代码

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
      color: #333;
    }

    .title span {
      background: linear-gradient(to right, #999, #999) no-repeat right bottom;
      background-size: 0 2px;
      transition: background-size 1000ms;
    }

    .title span:hover {
      background-position-x: left;
      background-size: 100% 2px;
    }
  </style>
</head>

<body>
  <h2 class="title">
    <span>
      Migrating From MySQL to YugabyteDB Using YugabyteDB VoyagerMigrating From MySQL to YugabyteDB Using</span>
  </h2>
</body>

</html>
相关推荐
Moment3 分钟前
面试官:一个接口使用postman这些测试很快,但是页面加载很慢怎么回事 😤😤😤
前端·后端·面试
诗书画唱6 分钟前
【前端面试题】JavaScript 核心知识点解析(第二十二题到第六十一题)
开发语言·前端·javascript
excel13 分钟前
前端必备:从能力检测到 UA-CH,浏览器客户端检测的完整指南
前端
前端小巷子19 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构26 分钟前
我的网站被攻击了,被干掉了 120G 流量,还在持续攻击中...
java·前端·架构
CodeSheep28 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss31 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
遗悲风32 分钟前
html二次作业
前端·html
江城开朗的豌豆36 分钟前
React输入框优化:如何精准获取用户输入完成后的最终值?
前端·javascript·全栈
CF14年老兵36 分钟前
从卡顿到飞驰:我是如何用WebAssembly引爆React性能的
前端·react.js·trae