.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. 基于oslo_messaging的RPC通信

    oslo_messaging源于Openstack的一个经典的模块,用以实现服务间的RPC通信.Client端将数据放入rabbitmq中,server端从消息队列中获取传送数据. oslo.mess ...

  2. EHR ORA--1187由于验主频雘失败而无法从文件读取 ORA-01110数据文件temp01.dbf

    alter tablespace TEMP add tempfile '/data/oracle/oradata/orcl/temp02.dbf' size 100m autoextend on; a ...

  3. 检查WMI协议是否通的

    在APM上的运行执行“wbemtest”,然后在上面的root\sivm前面加RPC不通的机器,先查WMI协议是否是通的

  4. Linq to sql 之 ExecuteQuery 错误:指定的转换无效

    问题:通过dbContext.ExecuteQuery 得到数据并赋值给一个集合. 代码: public IEnumerable<LeaveCodeSum> GetLeavTotal(st ...

  5. 织梦 列表页 list标签 按照自已设置的方式排序

    一.可以按照权重排序 降序排序 desc 1.添加的文章默认权重是自动加1,所以只要把想置顶的文章权重设置很高,如10000 2.{dede:list pagesize='12′ orderby='w ...

  6. openstack(Pike 版)集群部署(二)--- Keystone 部署

    一.介绍 参照官网部署:https://docs.openstack.org/keystone/queens/install/ 继续上一博客进行部署:http://www.cnblogs.com/we ...

  7. Docker容器进入-命令行只显示-bash-4.1#

    bash-4.1# cp /etc/skel/.bash* /root/ bash-4.1# su [root@4a841f025562 ~]# [root@4a841f025562 ~]# [roo ...

  8. [剑指Offer]52-两个链表的第一个公共节点

    题目链接 https://www.nowcoder.com/practice/6ab1d9a29e88450685099d45c9e31e46?tpId=13&tqId=11189&t ...

  9. f5创建monitor

  10. Djang的model创建的字段和参数复习

    class test_orm(models.Model): id = models.AutoField(primary_key=True) # int自增列,必须填入参数primary_key=Tru ...