昨天在聊天群里看见有人问，鼠标划过，文字下方横线从左向右划过怎么实现？作为初学前端的我页忍不住想要试一试自己能否实现这样的效果，当然用JS实现确实简单，另外自己最近刚巩固了css3的一些新的过渡和动画特性的编程，所以再巩固一下也好，遂决定用CSS3的一些特性来写这个特效。
一开始为了最简单，我直接就是做好一个导航，ul > li > a。 然后li左浮动布局。如下图所示:
(之前用flex布局，虽然能够自适应屏幕宽度，但是li元素的宽度也随之改变，导致以margin方式水平居中布局的方法失效，所以最后还是采用浮动布局，固定li宽度的方式布局)
具体要求: 鼠标悬浮在以上文字时，底部出现一条横线，横线从左到右变长。
说实话，不是老手，很多布局上的小点子真心想不到，只看书不写代码实践，思维永远难易开拓，不知变通，或许鄙人不适合编程也说不定，哈哈。。。。
好了，闲话不多说，大概布局的示意图如下:
具体布局的像素大小，就不写了。一开始我把焦点放在横线如何画出，首先考虑到盒子的属性border-bottom，居然没有想到盒子的宽度width，真是够low的。试想，利用边框如何实现变化过渡呢？当然首先设置好底边框，然后设置其宽度由0变到100%。间接实现了，想到这里，那不如就直接利用盒子的width更简单。但是，具体用到哪个盒子的宽度呢？并且盒子的宽度变化也要不影响周边元素的布局才行，那就只能用脱离文档流的元素了。于是，我想到了利用绝对定位的方法，新增一个元素，将其显示为块状元素，利用它的宽度由小变大的变化，实现下滑线的从左到右的变化。
代码如下: 在li下新增em标签
新品折扣惊喜购物车
样式代码如下:
li{flex: 1; width: 157px;margin: 0 10px;position: relative; float: left;}
li>em {position: absolute;left: 50%;bottom: 0;margin: 0 -75px; //大家可以把本行注释掉，启用下一行的代码，效果会不一样/* transform: translate(-50%); */}a{display: inline-block;height: 100%;width: 100%;text-align: center;line-height: 40px; text-decoration: none; font-weight: 700; font-size:20px;}
li:hover em{animation: test 0.4s ease;border: 1px solid red;width: 100%; }
@keyframes test { from{ width: 0; }
to{ width: 100%; }}
这里让元素水平方向上居中的方法有两个，常用的为
position: absolue; left: 50%; margin: 0 -75px(父元素宽度的一半取负数);
还有就是CSS3的新特性translate();它可以让盒子在x和y方向上产生相应的变化，具体请看:点击打开链接
position: absolue; left: 50%; transform: translateX( -50% );
虽然都是让元素居中，但是效果不一样，前者margin值的方法是一个固定的值，也就是-75px。所以，无论如何，em元素的左边启点位置在: 如下图所示: 它的效果则是从左往右宽度逐渐变长。
而后者translateX(-50%)的方法来水平居中的话，它的中间点却始终位于它父元素的中间点，这样出来的效果就是，鼠标移上去后，横线是自中间向两边延长的效果；如下图为三个时间段横线长度的变化图，横线应该是同一个位置，只是为了方便而花了三个不同的位置，它是自中间向两边拓展延长。
好了，就分享到这里，其实也算上分享吧，只是自己作为笔记总结一下吧，一定还有很多其它的简便方法。
其实我很想研究下内部的原理什么的，但是自己现在时间有限，等以后接触的更多了，再来研究原理的问题比较好，我们的大学老师告诉我们，编程开始要大气的学，之后再深入学。
如果觉得《html 鼠标经过出现横线 CSS实现鼠标经过 文字下方横线划过特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
