参考文章

    <ul>
<li>111</li>
<li>2222</li>
<li>3333333</li>
<li>444444444</li>
<li>555555555555</li>
<li>66666666666666</li>
</ul>
ul,li {
margin:;
padding:;
list-style: none;
} ul {
height: 50px;
line-height: 50px;
background-color: #f5f5f5;
border-radius: 8px;
} ul li {
float: left;
padding: 0 20px;
position: relative;
} li::before {
content: "";
position: absolute;
top:;
left: 100%;
width: 0%;
height: 100%;
border-bottom: 2px solid #000;
/* transition: all 0.3s linear; */
}
li:hover::before {
left:;
width: 100%;
} /* li:hover ~ li::before {
left: 0;
} */

纯CSS导航栏下划线跟随效果的更多相关文章

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

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

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

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

  3. 纯css导航栏下划线

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

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

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

  5. CSSTab栏下划线跟随效果

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

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

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

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

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

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

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

  9. tab 切换下划线跟随实现

    HTML 结构如下: <ul> <li class="active">不可思议的CSS</li> <li>导航栏</li> ...

随机推荐

  1. 009、MySQL取当前时间Unix时间戳,取今天Unix时间戳

    #取Unix时间戳 SELECT unix_timestamp( ) ; #取今天时间戳 SELECT unix_timestamp( curdate( ) ); 显示如下: 不忘初心,如果您认为这篇 ...

  2. sql语句中 and 与or 的优先级

  3. Spring Aop 原理分析

    @EnableAspectJAutoProxy Aop功能开启注解 为容器中导入 @Import(AspectJAutoProxyRegistrar.class)组件,在其重写方法中为 ioc容器 注 ...

  4. Day4-T1

    原题目 Hades 与 Dionysus 在狂饮后玩起了多米诺骨牌的小游戏. 现在桌上有 N 块多米诺骨牌,每块多米诺骨牌上半部分和下半部分上都有一个整数.每次翻转可让 一块多米诺骨牌上下翻转,即上下 ...

  5. BZOJ 4853 [Jsoi2016]飞机调度

    题解: 我严重怀疑语文水平(自己的和出题人的) 把航线按照拓扑关系建立DAG 然后最小路径覆盖 为什么两条首尾相接航线之间不用维护???? #include<iostream> #incl ...

  6. BeanUtils使用将一个对象拷贝到另外一个对象

    这里的BeanUtils是BeanUtils是org.springframework.beans.BeanUtils,和org.apache.commons.beanutils.BeanUtils是有 ...

  7. [LeetCode] 931. Minimum Falling Path Sum 下降路径最小和

    Given a square array of integers A, we want the minimum sum of a falling path through A. A falling p ...

  8. 在 Windows 系统上安装 Jekyll

    目录 安装 Ruby 环境 用 Bundler 安装 Jekyll 本文是写给完全未用过 Ruby 乃至命令行工具者的.对于一般的开发者,Jekyll 官方文档的相关内容已然足够. 本文为钱院学辅技术 ...

  9. Java扫雷游戏: JMine

    JMine是用Java和Swing编写的扫雷程序.作者是Jerry Shen(火鸟),代码有一定年头了,最开始是作者的课程设计.阅读这种小程序对编程语言的学习挺有帮助.本文只简单介绍一些关键的地方,实 ...

  10. 在Ubuntu下搭建Android开发环境(AndroidStudio)

    在ubuntu下搭建Android开发环境 本教程的开发环境的搭建有三个大步骤:安装Java jdk,安装Android studio,安装sdk 笔者搭建环境的时候用的是Ubuntu18.04 1. ...