.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;
}
不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
纯CSS导航栏下划线跟随效果
参考文章
- 111
- 2222
- 3333333 < ...
4 CSS导航栏&;下拉菜单&;属性选择器&;属性和值选择器
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: & ...
css实现导航栏下划线跟随效果
话不多说先附上代码
奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...
[HTML/CSS]导航栏的下划线跟随效果