利用css3实现鼠标移入下划线向两边展开效果

利用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，为超人原创文章，想获取更好的页面浏览效果或者有任何问题请进入博客，同时也可在博主评论区进行留言，让博主为大家答疑解惑~】