话不多说先附上代码

  <style>

        ul li {

            float: left;

            display: block;

            list-style: none;

            margin-left: 20px;

            border-bottom: 2    px black solid;

            position: relative;

        }

        ul li::before {

            content: "";

            position: absolute;

            top: 0;

            left: 100%;

            width: 0;

            height: 100%;

            border-bottom: 2px solid #000;

            transition: 0.2s all linear;

        }

        ul li:hover::before {

            width: 100%;

            left: 0;

        }

        ul li:hover~li::before {

            left: 0;

        }

    </style>

</head>

<body>

    <ul>

        <li>跟着</li>

        <li>导航栏</li>

        <li>光标小下划线跟随</li>

        <li>跟随走动的下划线</li>

        <li>跟随走动</li>

    </ul>

</body>

通配符~的作用是当前元素的下一个元素

css实现导航栏下划线跟随效果的更多相关文章

  1. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  2. 奇妙的CSS3—导航栏下划线跟随效果

    先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...

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

    参考文章 <ul> <li>111</li> <li>2222</li> <li>3333333</li> < ...

  4. CSSTab栏下划线跟随效果

    神奇的 ~ 选择符 对于当前 hover 的 li ,其对应伪元素的下划线的定位是 left: 100%,而对于 li:hover ~ li::before,它们的定位是 left: 0. ul li ...

  5. [HTML/CSS]导航栏的下划线跟随效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 纯css导航栏下划线

    .nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...

  7. 纯css导航下划线跟随效果【转载】

    css: ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate ...

  8. day19—纯CSS实现菜单列表下框跟随效果

    转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...

  9. CSS实现导航栏底部动态滚动条效果

    预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...

随机推荐

  1. VMware Workstation pro无法在Windows上运行，检查可在Windows上运行的此应用的更新版本

    我的Windows版本是win10-1903,VMware版本比较老旧是VMware-10:国庆节后微软推送了一个新的更新补丁,更新之后发现VMware无法打开(未更新前正常). 更新补丁详情如下: ...

  2. XCTF-WEB-高手进阶区-Web_python_template_injection-笔记

    Web_python_template_injection o(╥﹏╥)o从这里开始题目就变得有点诡谲了 网上搜索相关教程的确是一知半解,大概参考了如下和最后的WP: http://shaobaoba ...

  3. Springboot日志LOGO改变和设计

    每次启动Springboot的时候,SpringBoot都会打印一个LOGO,那么这个LOGO是可以关闭和改变的. 1.关闭Springboot的LOGO 2.改变Springboot的日志LOGO ...

  4. JDK 1.8 中文 API CHM

    链接: https://pan.baidu.com/s/1AiJn6RM1KoEL1n_96qoQhQ 提取码: n2ya

  5. 【Redis】Redis开篇与如何安装单机版Redis，这次我会了！！

    写在前面 很早之前,就有不少小伙伴微信留言说:冰河,你能不能写一个Redis专栏啊,我最近在学习Redis,看书看不下去,学习视频又觉得视频太长了,还是看你的文章比较给力!哈哈,原来我写的文章能够让小 ...

  6. C#LeetCode刷题之#168-Excel表列名称（Excel Sheet Column Title）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3850 访问. 给定一个正整数,返回它在 Excel 表中相对应的 ...

  7. 03 Arduino-模拟输出与PWM的操作方法

    在arduino开发板上面,标注为PWM的管脚的可以被当作数模转换管脚使用 01 模拟输出  analogWrite(pin, value) pin: 选定的引脚号码  value:取值范围 0-25 ...

  8. Spring Boot整合ElasticSearch和Mysql 附案例源码

    导读 前二天,写了一篇ElasticSearch7.8.1从入门到精通的(点我直达),但是还没有整合到SpringBoot中,下面演示将ElasticSearch和mysql整合到Spring Boo ...

  9. 《T-GCN: A Temporal Graph Convolutional Network for Traffic Prediction》 代码解读

    论文链接:https://arxiv.org/abs/1811.05320 博客原作者Missouter,博客链接https://www.cnblogs.com/missouter/,欢迎交流. 解读 ...

  10. guice的能力简述

    guice这个google出的bean容器框架,ES有用到他. 能干什么 是一个bean容器 能AOP 能力细分与使用方式 以module创建injector.可以看成是一个容器.Module需要自定 ...