纯css导航栏下划线
.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导航栏下划线的更多相关文章
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 纯CSS导航栏下划线跟随效果
参考文章 <ul> <li>111</li> <li>2222</li> <li>3333333</li> < ...
- 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...
- css实现导航栏下划线跟随效果
话不多说先附上代码 <style> ul li { float: left; display: block; list-style: none; margin-left: 20px; bo ...
- 奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...
- [HTML/CSS]导航栏的下划线跟随效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
- CSS:CSS 导航栏
ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...
- 与导航栏下控件的frame相关的edgesForExtendedLayout、translucent、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets等几个属性的详解
在引入了导航控制器UINavigationController和分栏控制器UITabBarController之后,我们在设置控件的frame的时候就需要注意避开导航栏UINavigationBar ...
随机推荐
- 基于oslo_messaging的RPC通信
oslo_messaging源于Openstack的一个经典的模块,用以实现服务间的RPC通信.Client端将数据放入rabbitmq中,server端从消息队列中获取传送数据. oslo.mess ...
- EHR ORA--1187由于验主频雘失败而无法从文件读取 ORA-01110数据文件temp01.dbf
alter tablespace TEMP add tempfile '/data/oracle/oradata/orcl/temp02.dbf' size 100m autoextend on; a ...
- 检查WMI协议是否通的
在APM上的运行执行“wbemtest”,然后在上面的root\sivm前面加RPC不通的机器,先查WMI协议是否是通的
- Linq to sql 之 ExecuteQuery 错误:指定的转换无效
问题:通过dbContext.ExecuteQuery 得到数据并赋值给一个集合. 代码: public IEnumerable<LeaveCodeSum> GetLeavTotal(st ...
- 织梦 列表页 list标签 按照自已设置的方式排序
一.可以按照权重排序 降序排序 desc 1.添加的文章默认权重是自动加1,所以只要把想置顶的文章权重设置很高,如10000 2.{dede:list pagesize='12′ orderby='w ...
- openstack(Pike 版)集群部署(二)--- Keystone 部署
一.介绍 参照官网部署:https://docs.openstack.org/keystone/queens/install/ 继续上一博客进行部署:http://www.cnblogs.com/we ...
- Docker容器进入-命令行只显示-bash-4.1#
bash-4.1# cp /etc/skel/.bash* /root/ bash-4.1# su [root@4a841f025562 ~]# [root@4a841f025562 ~]# [roo ...
- [剑指Offer]52-两个链表的第一个公共节点
题目链接 https://www.nowcoder.com/practice/6ab1d9a29e88450685099d45c9e31e46?tpId=13&tqId=11189&t ...
- f5创建monitor
- Djang的model创建的字段和参数复习
class test_orm(models.Model): id = models.AutoField(primary_key=True) # int自增列,必须填入参数primary_key=Tru ...