.nav-underline > *{/* 指定容器,里面可以是li、span等多样化的元素 */
display: inline-block;
margin: -3px;
padding: 10px 15px;
position: relative;
cursor: pointer;
}
.nav-underline > *::before {/* 通过伪元素实现下划线效果 */
content: '';
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2px solid #1DA3FC;
transition: 0.2s all linear;
}
.nav-underline > *:hover::before {
width: 100%;
left: 0;
}
.nav-underline > *:hover ~ *::before {/* 关键性的连贯效果就在于 ~ 选择符 */
left: 0;
}
<ul class="nav-underline">
<li>不可思议的css</li>
<li>导航栏</li>
<li>pure css</li>
<li>光标下划线跟随</li>
<li>Nav underline</li>
</ul>

纯css导航栏下划线的更多相关文章

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

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

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

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

  3. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  4. css实现导航栏下划线跟随效果

    话不多说先附上代码 <style> ul li { float: left; display: block; list-style: none; margin-left: 20px; bo ...

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

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

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

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

  7. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  8. CSS:CSS 导航栏

    ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...

  9. 与导航栏下控件的frame相关的edgesForExtendedLayout、translucent、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets等几个属性的详解

    在引入了导航控制器UINavigationController和分栏控制器UITabBarController之后,我们在设置控件的frame的时候就需要注意避开导航栏UINavigationBar ...

随机推荐

  1. Mysql 5.7 忘记root密码或重置密码的详细方法

    在Centos中安装完MySQL数据库以后,不知道密码,这可怎么办,下面给大家说一下怎么重置密码 在Centos中安装完MySQL数据库以后,不知道密码,这可怎么办,下面给大家说一下怎么重置密码 1. ...

  2. angularjs 粘贴事件

    参考 http://www.jb51.net/article/89708.htm ng-paste 需要setTimeout,否则无法获取到数据

  3. 17. Letter Combinations of a Phone Number (backtracking)

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  4. FileReader读取文件详解

    FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...

  5. stark组件之注册【模仿Django的admin】

    一.先看下django的admin是如何实现注册功能 首先导入admin这个对象和我们的model模块 from django.contrib import admin # Register your ...

  6. java调用dll

    @参考文章1,@参考文章2 根据上篇博客(参考文章2)java生成的dll测试 1,新建java项目,新建WebContent,子目录建WEB-INF\lib,加进jna-3.4.0.jar 新建ja ...

  7. declare -A color

    #!/bin/bash ## 声明变量 declare -A color # 定义颜色 # bc_color : background color color[red]="\e[1;31m& ...

  8. linux下查看配置信息命令

    # uname -a                                                 # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue   ...

  9. tomcat实现多端口、多域名访问(只针对一个tomcat)

    说明:这个部分介绍如何在tomcat中进行配置,使同一个应用可以通过不同的端口号进行访问. 在某些需要进行安全控制的场景中会应用到.例如:不同地址段只能通过某个端口访问. 2 找到tomcat的主目录 ...

  10. vue vue-route 传参 $route.params

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...