本篇文章主要介紹了純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;

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。