鼠标悬停加下划线

最新推荐文章于 2024-06-22 12:56:31 发布

原创最新推荐文章于 2024-06-22 12:56:31 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>鼠标悬停下划线</title>

  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f8f8f8;
    }

    a {
      position: relative;
    }

    a::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 3px;
      background: #4c81c9;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
    }

    a:hover {
      color: #4c81c9;
    }

    a:hover::after {
      transition: 0.3s;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  </style>
</head>
<body>
  <a href="#">首页</a>
  <a href="#">产品展示</a>
  <a href="#">新闻资讯</a>
  <a href="#">关于我们</a>
</body>
</html>