border-bottom: 3px solid #09d170

border-bottom就行

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

css就能搞定的事情。

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

推薦用outline

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

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

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

底部邊框樣式：

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

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

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

希望對(duì)你有所幫助！

<div></div>

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