纯CSS导航栏下划线跟随效果

最新推荐文章于 2024-06-14 11:20:52 发布

weixin_34194317

最新推荐文章于 2024-06-14 11:20:52 发布

阅读量96

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2367690/blog/2413924

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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;
}

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

关键

element1~element2

p~ul

选择前面有 <p> 元素的每个 <ul> 元素。

css3

转载于:https://my.oschina.net/u/2367690/blog/2413924