使用CSS怎么實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨效果？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站優(yōu)化、成都全網(wǎng)營(yíng)銷推廣、競(jìng)價(jià)托管、品牌運(yùn)營(yíng)等營(yíng)銷獲客服務(wù)。成都創(chuàng)新互聯(lián)擁有網(wǎng)絡(luò)營(yíng)銷運(yùn)營(yíng)團(tuán)隊(duì)，以豐富的互聯(lián)網(wǎng)營(yíng)銷經(jīng)驗(yàn)助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營(yíng)銷獲客難題，做到“讓獲客更簡(jiǎn)單”。自創(chuàng)立至今，成功用技術(shù)實(shí)力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營(yíng)銷”三大難題，同時(shí)降低了營(yíng)銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！
假設(shè) HTML 結(jié)構(gòu)如下：
導(dǎo)航欄目的 li 的寬度是不固定的
當(dāng)從導(dǎo)航的左側(cè) li 移向右側(cè) li ，下劃線從左往右移動(dòng)。同理，當(dāng)從導(dǎo)航的右側(cè) li 移向左側(cè) li ，下劃線從右往左移動(dòng)。
實(shí)現(xiàn)需求
第一眼看到這個(gè)效果，感覺這個(gè)跟隨動(dòng)畫，僅靠 CSS 是不可能完成的。
如果想只用 CSS 實(shí)現(xiàn)，只能另辟蹊徑，使用一些討巧的方法。
好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成這個(gè)效果。分析一下難點(diǎn)：
寬度不固定
第一個(gè)難點(diǎn)， li 的寬度是不固定的。所以，我們可能需要從 li 本身的寬度上做文章。
既然每個(gè) li 的寬度不一定，那么它對(duì)應(yīng)的下劃線的長(zhǎng)度，肯定是是要和他本身相適應(yīng)的。自然而然，我們就會(huì)想到使用它的 border-bottom 。
重慶分公司
重慶分公司
li {
border-bottom: 2pxsolid#000;
}那么，可能現(xiàn)在是這樣子的（li 之間是相連在一起的，li 間的間隙使用 padding 產(chǎn)生）：
默認(rèn)隱藏，動(dòng)畫效果
當(dāng)然，這里一開始都是沒有下劃線的，所以我們可能需要把他們給隱藏起來。
li {
border-bottom: 0pxsolid#000;
}推翻重來，借助偽元素
這樣好像不行，因?yàn)殡[藏之后，hover li 的時(shí)候，需要下劃線動(dòng)畫，而 li 本身肯定是不能移動(dòng)的。所以，我們考慮借助偽元素。將下劃線作用到每個(gè) li 的偽元素之上。
li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom: 2pxsolid#000;
}下面考慮第一步的動(dòng)畫，hover 的時(shí)候，下劃線要從一側(cè)運(yùn)動(dòng)展開。所以，我們利用絕對(duì)定位，將 li 的偽元素的寬度設(shè)置為0，在 hover 的時(shí)候，寬度從 width: 0 -> width: 100% ，CSS 如下：
li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
border-bottom: 2pxsolid#000;
}
li:hover::before {
width: 100%;
}得到，如下效果：
左移左出，右移右出
OK，感覺離成功近了一步。現(xiàn)在還剩下一個(gè)最難的問題：
如何讓線條跟隨光標(biāo)的移動(dòng)動(dòng)作，實(shí)現(xiàn)當(dāng)從導(dǎo)航的左側(cè) li 移向右側(cè) li ，下劃線從左往右移動(dòng)。同理，當(dāng)從導(dǎo)航的右側(cè) li 移向左側(cè) li ，下劃線從右往左移動(dòng)。
我們仔細(xì)看看，現(xiàn)在的效果：
當(dāng)從第一個(gè) li 切換到第二個(gè) li 的時(shí)候，第一個(gè) li 下劃線收回的方向不正確。所以，可以能我們需要將下劃線的初始位置位移一下，設(shè)置為 left: 100% ，這樣每次下劃線收回的時(shí)候，第一個(gè) li 就正確了：
li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2pxsolid#000;
}
li:hover::before {
left: 0;
width: 100%;
}看看效果：
額，仔細(xì)對(duì)比兩張圖，第二種效果其實(shí)是撿了芝麻丟了西瓜。第一個(gè) li 的方向是正確了，但是第二個(gè) li 下劃線的移動(dòng)方向又錯(cuò)誤了。
神奇的 ~ 選擇符
所以，我們迫切需要一種方法，能夠不改變當(dāng)前 hover 的 li 的下劃線移動(dòng)方式卻能改變它下一個(gè) li 的下劃線的移動(dòng)方式（好繞口）。
沒錯(cuò)了，這里我們可以借助 ~ 選擇符，完成這個(gè)艱難的使命，也是這個(gè)例子中，最最重要的一環(huán)。
對(duì)于當(dāng)前 hover 的 li ，其對(duì)應(yīng)偽元素的下劃線的定位是 left: 100% ，而對(duì)于 li:hover ~ li::before ，它們的定位是 left: 0 。CSS 代碼大致如下：
li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2pxsolid#000;
transition: 0.2salllinear;
}
li:hover::before {
width: 100%;
left: 0;
}
li:hover~li::before {
left: 0;
}至此，我們想要的效果就實(shí)現(xiàn)拉！撒花?？纯矗?/p>
效果不錯(cuò)，就是有點(diǎn)僵硬，我們可以 適當(dāng)改變緩動(dòng)函數(shù)以及加上一個(gè) 動(dòng)畫延遲，就可以實(shí)現(xiàn)上述開頭里的那個(gè)效果了。當(dāng)然，這些都是錦上添花的點(diǎn)綴。
完整的DEMO可以戳這里: CodePen --Demo
最后
本方法 最大的瑕疵在于一開始進(jìn)入第一個(gè) li 的時(shí)候，線條只能是從右往左，除此之外，都能很好的實(shí)現(xiàn)跟隨效果。
許久沒更新了，最近沉迷學(xué)習(xí)區(qū)塊鏈相關(guān)技術(shù)，譬如以太坊編程，智能合約的編寫巴拉巴拉的。后面還是會(huì)把更多精力放在本行，多出一些前端文章，CSS 的魅力還是無法抵擋的。
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。
css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
