html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码

本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码，分享给大家，具体如下：

效果：

代码：

html：

• aaaa
• bbbbbbb
• cccc
• dddd
• eeee

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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。