這種下劃線是用css還是js寫的？

border-bottom: 3px solid #09d170

border-bottom就行

css就可以了
border-bottom+hover
需要注意的是，沒有Hover的時候也要給border-bottom一個高度，顏色為透明。
這樣Hover的時候不會突然就出來一個下邊框

css就能搞定的事情。

很明顯不是下劃線而像是邊框?qū)傩?/p>

推薦用outline

用outline會好些，因為outline 不會象border那樣影響元素的尺寸或者位置，outline不占據(jù)空間。
border 可應用于幾乎所有有形的html元素，而 outline 是針對鏈接、表單控件和ImageMap等元素設計。

補充下動畫實現(xiàn)，單純的左到右漸變 只需要css3就能實現(xiàn)了，如果要根據(jù)鼠標移入方式來動態(tài)區(qū)分（左至右）（右至左）就需要用js來判斷鼠標的移入方向

這種樣式一般使用css的border屬性來實現(xiàn)。
就你的網(wǎng)站我們來分析一下：

底部邊框樣式：

自行勾選或取消勾選 border-bottom 屬性看看效果

懸浮效果：
自行勾選和取消勾選 hover 看看效果：

我相信經(jīng)過以上調(diào)試與驗證，你就知道什么原因了！

希望對你有所幫助！

<div></div>

div{
    border-bottom:1px solid #fff;
}
div:hover{
    border-bottom:1px solid green;
}