本篇文章主要介紹了純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;} |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
