CSS實現鼠標經過，文字下方橫線劃過特效

昨天在聊天羣裏看見有人問，鼠標劃過，文字下方橫線從左向右劃過怎麼實現？作爲初學前端的我頁忍不住想要試一試自己能否實現這樣的效果，當然用JS實現確實簡單，另外自己最近剛鞏固了css3的一些新的過渡和動畫特性的編程，所以再鞏固一下也好，遂決定用CSS3的一些特性來寫這個特效。            一開始爲了最簡單，我直接就是做好一個導航，ul > li  > a。 然後li左浮動佈局。如下圖所示: 

>>阅读原文<<