<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>纯CSS导航栏下划线跟随效果</title>

 </head>

 <style>

     *{

         margin: 0;

         padding: 0;

     }

     html,

     body{

         width: 100%;

         height: 100%;

     }

     ul{

         display: flex;

         position: absolute;

         top: 50%;

         left: 50%;

         transform: translate(-50%, -50%);

     }

     li{

         position: relative;

         padding: 1em 2em;

         font-size: 24px;

         list-style: none;

         white-space:nowrap;

     }

     li::after{

         content: '';

         position: absolute;

         bottom: 0;

         width: 0;

         height: 2px;

         background-color: #000;

         transition: .5s all linear;

     }

     li:hover::after{

         width: 100%;

     }

     li::after{

         left: 100%;     /*选中项上一个下划线收回的方向，从左往右收线*/

     }

     li:hover::after{

         left: 0;      /*选中项下划线出线的方向，从左往右出线*/

     }

     li:hover ~ li::after {

         left: 0;    /*选中项下一个下划线出线的方向，从左往右收线*/

     }

 </style>

 <body>

     <ul>

         <li>纯CSS导航栏</li>

         <li>导航菜单项</li>

         <li>被划过</li>

         <li>下划线跟随</li>

     </ul>

 </body>

 </html>

[HTML/CSS]导航栏的下划线跟随效果的更多相关文章

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

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

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

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

  3. 纯css导航下划线跟随效果【转载】

    css: ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate ...

  4. android实现对导航Tab设置下划线选中效果

    技术人员核心竞争力还是技术啊.努力提高各种实现效果.加油哦! 直接看效果.此linearLayout只有两个Button ,当选中Button1,Button1有个下划线选中效果.当选中Buton2, ...

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

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

  6. CSSTab栏下划线跟随效果

    神奇的 ~ 选择符 对于当前 hover 的 li ,其对应伪元素的下划线的定位是 left: 100%,而对于 li:hover ~ li::before,它们的定位是 left: 0. ul li ...

  7. day19—纯CSS实现菜单列表下框跟随效果

    转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...

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

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

  9. 纯css导航栏下划线

    .nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...

随机推荐

  1. (转载)Javascript 中的非空判断 undefined,null, NaN的区别

    原文地址:https://blog.csdn.net/oscar999/article/details/9353713 在介绍这三个之间的差别之前, 先来看一下JS  的数据类型. 在 Java ,C ...

  2. 第88节：Java中的Ajax和ASP.NET和TCP/IP 教程和JSON

    第88节:Java中的Ajax和Jquery ajax是什么?有什么用?原理,怎么用? ajax是asynchronous javascript and xml(异步javascript和xml),是 ...

  3. 简单读！Mybatis源码（一）一条select的一生

    工具除了会用,还应该多做点.我觉得使用一个软件工具(开源类),一般会经历几个步骤: 1. 通过wiki了解大致作用,然后开始码代码: 2. 系统性地学习其特性,找出可能需要的点,用上去: 3. 通过阅 ...

  4. 简单读！tomcat源码（一）启动与监听

    tomcat 作为知名的web容器,很棒! 本文简单了从其应用命令开始拆解,让我们对他有清晰的了解,揭开神秘的面纱!(冗长的代码流水线,给你一目了然) 话分两头: 1. tomcat是如何启动的? 2 ...

  5. mysql怎么限制ip访问

    grant all privileges on *.* to 'root'@'ip'identified by '密码'; #授权某个ip的用户可以通过密码访问数据库

  6. 使用git在github上创建新工程

    这段时间进经常会忘记如何在github上同步工程,于是又得查资料,查参考书,浪费了很长时间,因此有了感触,写几篇有关此类问题的篇章! 这是老手新手都十分容易犯的错误,就是在创建一个新github项目或 ...

  7. Ubuntu 16.04下GDB调试

    在linux中还有一个更受大家欢迎的调试工具:GDB.GDB是一个由GNU开源组织发布的.UNIX/LINUX操作系统下的.基于命令行的.功能强大的程序调试工具.可以用来调试C,C++程序. GDB功 ...

  8. Spark面试题

    RDD怎么理解? RDD 是 Spark 的灵魂,也称为弹性分布式数据集.一个 RDD 代表一个可以被分区的只读数据集.RDD 内部可以有许多分区(partitions),每个分区又拥有大量的记录(r ...

  9. Jenkins系列之四——设置邮件通知

    Jenkins持续集成,当我们自动打包部署完,我们可以发送一封邮件给相关的负责人.现介绍一下如何在Jenkins中配置实现邮件通知. 在Jenkins中配置实现邮件通知,Jenkins提供了两种方式的 ...

  10. RESTful规范1

    RESTful规范 一 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为"表征状 ...