话不多说先附上代码

  <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. Java 图书管理项目

    思路总结: 1.使用空布局 2.构造方法里写初始打开的界面 3.return 意思是 "否则"  代替else if,一切归于平静 4.连接数据库时 db=new database ...

  2. day27:异常&反射

    目录 认识异常处理 1.程序错误的种类    2.异常的分类 3.AssertionError(断言assert语句失败) 异常处理的基本语法 1.异常处理的基本语法 2.带有分支的异常处理 3.处理 ...

  3. Android SharedPreferences存储详解

    什么是SharedPreferences存储 一种轻量级的数据保存方式 类似于我们常用的ini文件,用来保存应用程序的一些属性设置.较简单的参数设置. 保存现场:保存用户所作的修改或者自定义参数设定, ...

  4. golang 数据类型/基础语法

    常量 变量 复合类型 结构体 数组 基础类型 整型 浮点型 复数 bool 值 字符型 字符串 错误(稍微有异议) 引用类型 切片 指针 字典 管道 函数 接口 其他语法结构 包 流程控制 运算符 注 ...

  5. Eclipse的Servers中无法添加Tomcat6/7

    2017年03月06日 17:14:46 阅读数:1007 Eclipse中在添加tomcat时发现6和7点击后发现ServerName是灰色的不能使用,也点不了NEXT,在各种查百度后发现需要删除w ...

  6. JS的赋值与深浅拷贝实例

    赋值 基本类型: 传值,在栈内存中的数据发生数据变化的时候,系统会自动为新的变量分配一个新的之值在栈内存中,两个变量相互独立,互不影响的 引用类型: 传址,只改变指针的指向,指向同一个对象,两个变量相 ...

  7. nodejs版本RSA算法封装（SHA1）

    故事背景 看到没写过代码的人聊算法细节装X,真的感觉非常逗,又不好意思戳破人家的表演. 这个世界好奇妙,总有那种看了一些周边普及性书籍就开始好为人师.指点江山,乖乖,放到古代很可能就是赵括,能代替廉颇 ...

  8. Pytorch_第十篇_卷积神经网络（CNN）概述

    卷积神经网络(CNN)概述 Introduce 卷积神经网络(convolutional neural networks),简称CNN.卷积神经网络相比于人工神经网络而言更适合于图像识别.语音识别等任 ...

  9. C++ 2的幂次方表示

    [题目描述] 任何一个正整数都可以用2的幂次方表示.例如: 137=27+23+20 同时约定方次用括号来表示,即ab可表示为a(b).由此可知,137可表示为: 2(7)+2(3)+2(0) 进一步 ...

  10. 20分钟理清Maven构建中的测试相关工具的关系

    如果你用Maven进行系统构建,同时还要同步编写测试用例,获取用例成功与否以及用例覆盖率的相关报告,那么这些工具你肯定接触过不少: JUnit TestNG maven-surefire-plugin ...