html 鼠标经过出现横线,CSS实现鼠标经过，文字下方横线划过特效

昨天在聊天群里看见有人问，鼠标划过，文字下方横线从左向右划过怎么实现？作为初学前端的我页忍不住想要试一试自己能否实现这样的效果，当然用JS实现确实简单，另外自己最近刚巩固了css3的一些新的过渡和动画特性的编程，所以再巩固一下也好，遂决定用CSS3的一些特性来写这个特效。

一开始为了最简单，我直接就是做好一个导航，ul > li  > a。 然后li左浮动布局。如下图所示:

(之前用flex布局，虽然能够自适应屏幕宽度，但是li元素的宽度也随之改变，导致以margin方式水平居中布局的方法失效，所以最后还是采用浮动布局，固定li宽度的方式布局)

具体要求: 鼠标悬浮在以上文字时，底部出现一条横线，横线从左到右变长。

说实话，不是老手，很多布局上的小点子真心想不到，只看书不写代码实践，思维永远难易开拓，不知变通，或许鄙人不适合编程也说不定，哈哈。。。。

好了，闲话不多说，大概布局的示意图如下:

具体布局的像素大小，就不写了。一开