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

效果图

在这里插入图片描述

实现代码

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

相关阅读:
49从零开始用Rust编写nginx，我竟然在同一个端口上绑定了多少IP
Spring的AOP介绍和使用
OA项目之会议通知（查询&是否参会&反馈详情）
java实现贪心算法代码示例
抖音开放平台第三方代小程序开发，授权事件、消息与事件通知总结
java计算机毕业设计教学质量评价系统源程序+mysql+系统+lw文档+远程调试
rpm安装postgresql12
机器学习理论公式推导及原理—决策树
第一节 vue3 router内置类型有哪些
softmax回归从零开始实现

原文地址：https://blog.csdn.net/weixin_49431241/article/details/134535428