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>
相关推荐
SoaringHeart9 分钟前
Flutter最佳实践:IM聊天文字链接自动识别跳转
前端·flutter
掘金一周1 小时前
企业中要做智能体,最佳的方案是什么? | 沸点周刊 6.18
前端·人工智能·ai编程
Darling噜啦啦1 小时前
CSS 3D 变换与 Flex 布局实战:从零打造旋转立方体
前端·css
秃头网友小李1 小时前
前端难点:keep-alive 缓存什么?RouterView 的 key 为什么要带 scopeId?
前端·vue.js
鱼人1 小时前
CSS 变量:一个变量救你一百次复制粘贴
前端
长大19881 小时前
CSS 到底是什么?和 HTML 的区别一次讲清楚
前端
禅思院1 小时前
路由性能优化终极指南:从懒加载漏洞到边缘渲染的架构跃迁
前端·架构·前端框架
怕浪猫1 小时前
Electron 开发实战(十六):总结与展望|生态现状、框架对比、行业趋势与学习指南
前端·javascript·electron
文心快码BaiduComate1 小时前
Comate 搭载GLM-5.2:百万上下文,稳定支撑长程任务
前端·程序员·开源
星栈2 小时前
Dioxus 的 `rsx!` 语法:如果你会 React,上手确实特别快
前端·前端框架