话不多说先附上代码

  <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. Nginx.conf参数配置详解

    Nginx的配置文件nginx.conf配置详解如下: user nginx nginx; #Nginx用户及组:用户 组.window下不指定 worker_processes 8; #工作进程:数 ...

  2. js 排他思想案例

    <!-- 排他思想 --> <button>按钮1</button> <button>按钮2</button> <button> ...

  3. ConHost.exe机制

  4. Java 二维数组及方法概况

    数组 数组是指一组数据的集合,数组中的每个数据被称作元素.在数组中可以存放任意类型的元素,但同一个数组里存放的元素类型必须一致. 数组的定义 在Java中,可以使用以下格式来定义一个数组. 数据类型[ ...

  5. JetCache埋点的骚操作,不服不行啊

    阐述背景 缓存是应对高并发绝对的利器,在很多业务场景允许的情况下,都可以使用缓存来提供性能. 既然用了缓存,那对缓存进行监控必不可少.比如缓存加载耗时,新增耗时等. 在 JetCache 中进行埋点操 ...

  6. java+opencv实现图像灰度化

    灰度图像上每个像素的颜色值又称为灰度,指黑白图像中点的颜色深度,范围一般从0到255,白色为255,黑色为0.所谓灰度值是指色彩的浓淡程度,灰度直方图是指一幅数字图像中,对应每一个灰度值统计出具有该灰 ...

  7. C++ Templates（1.3 多模板参数 Multiple Template Parameters）

    返回完整目录 目录 1.3 多模板参数 Multiple Template Parameters 1.3.1 为返回类型设置模板参数参数 Template Parameters for Return ...

  8. python中eval, exec, execfile,和compile

    eval(str [,globals [,locals ]])函数将字符串str当成有效Python表达式来求值,并返回计算结果. 同样地, exec语句将字符串str当成有效Python代码来执行. ...

  9. cinder api启动过程源码分析

    1.启动cinder-api服务 当你通过cinder-api命令(如:/usr/bin/cinder-api --config-file /etc/cinder/cinder.conf)启动api服 ...

  10. YOLO v3算法介绍

    图片来自https://towardsdatascience.com/yolo-v3-object-detection-with-keras-461d2cfccef6 数据前处理 输入的图片维数:(4 ...