导航栏css去下划线的代码 纯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;

}

不可思议的css导航栏pure css光标下划线跟随Nav underline

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

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

纯CSS导航栏下划线跟随效果

参考文章

11122223333333 < ...

4 CSS导航栏&amp&semi;下拉菜单&amp&semi;属性选择器&amp&semi;属性和值选择器

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

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

话不多说先附上代码

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

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

&lbrack;HTML&sol;CSS&rsqb;导航栏的下划线跟随效果