CSS导航栏下划线跟随效果

2020-06-11 16:00:49来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

CSS导航栏下划线跟随效果

效果图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
  <style>
    ul {
      display: flex;
      width: 800px;
      list-style: none;
    }

    li {
      position: relative;
      padding: 20px;
      transition: .2s all linear;
      cursor: pointer;
    }

    li::before {
        content: "";
        position: absolute;
        top: 0;
        left: 100%;
        width: 0;
        height: 100%;
        border-bottom: 2px solid #000;
        transition: 0.2s all linear;
    }

    li:hover::before {
        width: 100%;
        left: 0;
        transition-delay: .1s;
    }

    li:hover ~ li::before {
        left: 0;
    }

  </style>
</head>
<body>
  <ul>
    <li>不可思议的CSS</li>
    <li>导航栏</li>
    <li>光标小下划线跟随</li>
    <li>PURE CSS</li>
    <li>Nav Underline</li>
    <li>cyy demo</li>
  </ul>
</body>
</html>

 


原文链接:https://www.cnblogs.com/chenyingying0/p/13091325.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML骨架

下一篇:ie8下透明度处理