纯CSS实现鼠标滑过下划线跟随效果

最新推荐文章于 2023-04-09 22:40:45 发布

g229191727

最新推荐文章于 2023-04-09 22:40:45 发布

阅读量5.9k

点赞数 1

分类专栏： CSS 文章标签： CSS :before伪元素鼠标滑过下划线移动

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入reset.css重置样式-->
  <link href="https://cdn.bootcss.com/meyer-reset/2.0/reset.min.css" rel="stylesheet">
  <style type="text/css">
    ul { /*ul定位到页面中间位置*/
      margin: 50px auto;
      width: 500px;
    }
    li { /*设置li位置、字体大小*/
      position: relative;
      font-size: 25px;
      float: left;
      padding: 0 20px 0 20px;
    }
    /*利用:before实现下划线宽度从0-100%*/
    li:before {
      content: "";
      position: absolute;
      top: 0;
      left: 100%; /*下划线从右侧开始显示*/
      width: 0;
      height: 100%;
      border-bottom: 2px solid red;
      transition: 0.2s all linear; /*动画效果*/
    }
    li:hover:before {
      left: 0; /*鼠标滑过时，下划线从右向左移动*/
      width: 100%; /*同时，下划线宽度从0-100%*/
    }
    li:hover ~ li:before { /*~ 选择器：查找指定元素后面的所有兄弟结点*/
      left: 0; /*处于hover后面元素的下划线从左侧开始显示*/
    }
  </style>
</head>
<body>
<ul class="container">
  <li>简介</li>
  <li>详情</li>
  <li>帮助</li>
  <li>我的</li>
</ul>
</body>
</html>

g229191727

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
纯CSS实现鼠标滑过下划线跟随效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link href="https://cdn.bootcss.com/meyer-reset/2.
复制链接

扫一扫