css3+伪元素实现鼠标移入时下划线展开特效

1、效果图：

3、设置:before和:after两个伪元素，将其设置为背景色为蓝色，利用绝对定位将两个元素固定到#underline底部中间位置。

5、优化虽然目的达到了，但是用了两个伪元素，一个向左延伸50%，一个向右延伸50%，只用一个延伸至100%能否达到目的。