本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下:
效果:
代码:
html:
<ul> <li>aaaa</li> <li>bbbbbbb</li> <li>cccc</li> <li>dddd</li> <li>eeee</li> </ul>
css:
ul { padding:0; margin:0; font-size:0; } li { font-size:20px; padding:5px 15px 5px 15px; display: inline-block; position:relative; cursor: pointer; transition: all 0.5s; } li::before { content:''; display:block; position:absolute; width:0%; bottom:0; left:100%; border-bottom: 2px solid #999; transition: all 0.5s; } li:hover::before { left:0; width:100%; } li:hover ~ li::before { left:0; }
关键部分:
li:hover::before { left:0; width:100%; } li:hover ~ li::before { left:0; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
前两天接到一个无线的需求,我这个小白可是忙活了好几天在页面上有一个连接, 如...
如何修改elementUI提供的el-select组件的样式 网上有很多关于这个的解决方式: 1...
作者:Chimezie Enyinnaya 译者:前端小智 来源:blog 有梦想,有干货,微信搜索...
而且用博客程序建立的文章网站永远看上去都是个博客,可自定义的东西不是那么多...
《口袋妖怪:GO》从推出以来就火爆非常,用“火到服务器瘫痪”来形容都毫不夸张...
There is no doubt that JavaScript是没有多线程之说的,他只能一件事一件事的做...
meta http-equiv=X-UA-Compatible content=IE=7 / 以上代码告诉IE浏览器,无论是...
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动...
一、展示 因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移...
CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现...