话不多说先附上代码

  <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. CSS基础知识（下）

    3.层叠 稍微复杂的样式表中都可能存在两条甚至多条规则同时选择一个元素的情况.CSS通过一种叫作层叠(cascade)的机制来处理这种冲突. 层叠机制的原理是为规则赋予不同的重要程度.最重要的是作者样 ...

  2. 【Python学习笔记】字符串拼接方法（5种）总结

    字符串的 5 种拼接方法: “+”号 “,”号 直接连接 格式化 多行字符串拼接 第一种:“+”号 print("Hello"+"Python") 打印结果: ...

  3. css实现折扇效果

    总结思路: 1.首先进行结构的书写   <div class="box"></div> 2.要进行图片的重叠要用到position定位,需要重叠的元素及子元 ...

  4. 配置JDK的环境变量

    1.官网下载JDK安装包并进行安装,记住安装目录 2.安装完JDK后配置环境变量  计算机→属性→高级系统设置→高级→环境变量 3.系统变量→新建 JAVA_HOME 变量 .变量值填写jdk的安装目 ...

  5. Go语言入门系列(六)之再探函数

    Go语言入门系列前面的文章: Go语言入门系列(三)之数组和切片 Go语言入门系列(四)之map的使用 Go语言入门系列(五)之指针和结构体的使用 在Go语言入门系列(二)之基础语法总结这篇文章中已经 ...

  6. github渗透测试工具库

    本文作者:Yunying 原文链接:https://www.cnblogs.com/BOHB-yunying/p/11856178.html 导航: 2.漏洞练习平台 WebGoat漏洞练习平台: h ...

  7. 【SDOI2009】 HH的项链 - 莫队

    题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...

  8. 从零开始讲解JavaScript中作用域链的概念及用途

    从零开始讲解JavaScript中作用域链的概念及用途 引言 正文 一.执行环境 二.作用域链 三.块级作用域 四.其他情况 五.总结 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号搜 ...

  9. 喵的Unity游戏开发之路 - 轨道摄像机

    前言        很多童鞋没有系统的Unity3D游戏开发基础,也不知道从何开始学.为此我们精选了一套国外优秀的Unity3D游戏开发教程,翻译整理后放送给大家,教您从零开始一步一步掌握Unity3 ...

  10. Today At AntDock 2020年8月21日

    前段时间,我在 Mac 上使用 CLion 进行 C++ 编译,但发现 #include<bits/stdc++.h> 居然出了问题,无法使用,Xcode 也不行.我试图查找资料,但一般都 ...