话不多说先附上代码

  <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. jQuery 发布微博案例

    .box { width: 500px; height: 500px; border: 1px solid #efefef; margin: 0 auto; text-align: center; } ...

  2. 基于OpenSIPS做注册服务下，场景A打B，一方发起BYE挂断后收到500，另一方无法挂断的问题

    基于OpenSIPS做注册服务下,场景A打B,一方发起BYE挂断后收到500,另一方无法挂断的问题     最近在工作中遇到一个看似很奇怪的,排除起来很费劲,但最后的解决方式又及其简单的问题,下面我们 ...

  3. java_抽象类、接口、多态的使用

    抽象类 抽象类:包含抽象方法的类. 抽象方法 : 没有方法体的方法. 使用 abstract关键字修饰方法,该方法就成了抽象方法,抽象方法只包含一个方法名,而没有方法体. 格式为:修饰符 abstra ...

  4. 【Mysql】SpringBoot_2.1.0+Druid_1.1.10 配置数据源监控服务Yml格式

    访问地址:localhost:8080/druid 按照这个方法和版本配置没问题 版本或高或低可能会出现不兼容 1.添加依赖 <dependency> <groupId>com ...

  5. mapper.xml文件中传入list参数报错 ‘ ’附近有语法错误

    mapper.xml文件中传入list参数,使用foreach循环遍历值,但是在遍历的过程中出错了,具体代码如下所示 mapper.xml <select id="selectByCo ...

  6. Java—Map接口中的常用方法

    Map接口与Collection接口的区别 Collection中的集合,元素是孤立存在的(理解为单身),向集合中存储元素采用一个个元素的方式存储. Map中的集合,元素是成对存在的(理解为夫妻).每 ...

  7. C#LeetCode刷题之#67-二进制求和（Add Binary）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3929 访问. 给定两个二进制字符串,返回他们的和(用二进制表示) ...

  8. 36 个JS 面试题

    1.JS中let和const有什么用? 在现代js中,let&const是创建变量的不同方式. 在早期的js中,咱们使用var关键字来创建变量. let&const关键字是在ES6版本 ...

  9. generate_fixed_frame()方法生成Java方法栈帧

    在从generate_normal_entry()函数调用generate_fixed_frame()函数时的栈与寄存器的状态如下: 栈的状态如下图所示. 各个寄存器的状态如下所示. rax: ret ...

  10. Jmeter逻辑控制器之If Controller的使用解析

    一.If Controller概述 类似于编程语言中if语句,根据给定表达式的值决定是否执行该节点下的子节点,表达式的值 为true则执行,为false则不执行,默认使用javascript语法进行判 ...