css实现导航栏下划线跟随效果
话不多说先附上代码
<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实现导航栏下划线跟随效果的更多相关文章
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...
- 纯CSS导航栏下划线跟随效果
参考文章 <ul> <li>111</li> <li>2222</li> <li>3333333</li> < ...
- CSSTab栏下划线跟随效果
神奇的 ~ 选择符 对于当前 hover 的 li ,其对应伪元素的下划线的定位是 left: 100%,而对于 li:hover ~ li::before,它们的定位是 left: 0. ul li ...
- [HTML/CSS]导航栏的下划线跟随效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯css导航栏下划线
.nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...
- 纯css导航下划线跟随效果【转载】
css: ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate ...
- day19—纯CSS实现菜单列表下框跟随效果
转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...
- CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...
随机推荐
- 极简 Node.js 入门 - 1.3 调试
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 你知道MySQL是如何处理千万级数据的吗?
mysql 分表思路 一张一亿的订单表,可以分成五张表,这样每张表就只有两千万数据,分担了原来一张表的压力,分表需要根据某个条件进行分,这里可以根据地区来分表,需要一个中间件来控制到底是去哪张表去找到 ...
- C#设计模式之5-单例模式
单例模式(Singleton Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/397 访问. 单例模式属 ...
- cocos2dx重新设置 SDK NDK目录
参考博客https://blog.csdn.net/yinhe888675/article/details/41042347 初始设置SDK,NDK目录后,当我想换目录的时候不知道该怎么办,怎么重新设 ...
- vue-loader处理vue文件
loader:"vue-loader" ,引导vue文件被vue-loader/lib/index.js处理 第一步:解析vue文件 const utils = require(' ...
- CPF 入门教程 - 样式和动画(三)
CPF NetCore跨平台UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) 用样式可以对内部元素进行批量设置属性. ...
- 第三方登陆--QQ登陆--单体应用
从零玩转第三方QQ登陆 下面有源码 前后端分离版本 一样的思路 https://www.cnblogs.com/Yangbuyi/p/13194007.html 第三方GITEE登陆 https:// ...
- PAT 2-07. 素因子分解(20)
题目链接:http://www.patest.cn/contests/ds/2-08 题目意思:long int范围内的正整数N进行素因子分解. 直接整除即可,不需要素数筛选 代码如下: #inclu ...
- install -M
[root@controller ~]# source admin-openrc [root@controller ~]# neutron ext-list +-------------------- ...
- Windows如何快速远程到另一台Windows并管理多个远程服务器
Windows如何远程到另一台 Windows管理多个远程服务器 Windows第三方远程管理工具 准备远程机器 开启远程机器的远程桌面功能 首先在此电脑(我的电脑)图标上点击鼠标右键,选择" ...