利用css3实现鼠标移入下划线向两边展开效果
本文紧张先容了利用css3和伪元向来实现当鼠标移入的时候下划线由中间向两边展开的实现办法方法，于文中做了详细先容，来方便大家进行理解，末了给出了完全的示例代码供应大家参考学习，如果你恰好须要，那么超人就恰好有你须要的...
实现思路将伪元素:before和:after定位到元素底部中间，设置宽度从0变成100%达到目的。
实现方法
1.首先定义一个元素，并设置相对定位：武斌博客，技能博客，css如下：
2.设置:before和:after两个伪元素，设置其背景颜色(也便是下划线的颜色），这里超人设置为#337AFC，利用绝对定位将两个元素固定到#underline底部中间位置
3.设置鼠标移入效果
优化
目的是达到了，但是用了两个伪元素，一个向左延伸50%，一个向右延伸50%，只用一个延伸至100%是否一样可以实现该效果呢？
完全代码
只定义:after伪元素，将其从间隔左边50%宽度为0的同时改变成间隔左边0%宽度为100%就可以实现，从而达到了精简代码的目的，而且还多余出了:before方便进行别的操作。
干系文章：网页加载进度条的JS程序开拓思路与实际运用
【本文来自 武斌博客 http://www.wubin.pro，为超人原创文章，想获取更好的页面浏览效果或者有任何问题请进入博客，同时也可在博主评论区进行留言，让博主为大家答疑解惑~】
