一图泯恩仇，没错，老规矩，先上图。Look down↓↓↓
hover-transition.gif这是一个鼠标hover的效果，关键是文字上下方的效果。来，一分钟想一想怎么实现？
伪元素::before和::after ?
肯定的撒! 关键就是从左至右和从右至左的过渡。
先来实现从左至右的css代码:
到此呢，效果是酱紫的:
hover-transition2.gifちょっと待って ! 等等 ! 这是什么鬼 ? ::before已经按照我们的想法正确展示了，::after就有点……
好吧，加个左定位再看看—.—
啊哈，已经很接近了有木有! 那么，见证奇迹的时候要到了，请修改一行代码，look down↓↓↓
hover-transition3.png然后刷新下浏览器。
O(∩_∩)O哈 ! 效果出来了有木有 ! 很神奇有木有 !
OK, See you next time~