下划线hover下动态出现技巧

    酷炫的动画效果往往更能吸引眼球，下面我将分享纯CSS中，hover的时候出现下划线动态飞入的技巧。

1.下划线从左侧飞入：

?

1 2 3 4 5 6 7 8 9

div::before{     content:"";     width:50px;     position:absolute;<br>　　display:inline-block;<br>　　border-bottom:1px solid red;     bottom:0;     left:-100px；} div:hover::before{     left:0;     transition:all linear 1s;}

　　步骤：首先是设置div为相对位置（relative，主要用于before子元素的定位。因为绝对位置的定位要求其父元素的position属性值不能为static，而relative优点在于能保留原来的位置，故选用relative）。

　　　　　其次通过伪元素before创建div元素下的第一个位置的子元素，设置其为绝对位置（absolute），同时修改其显示属性为行内块（display：inline-block；）。

　　　　   第三是设置伪元素before的位置，将其定位到div父元素的前面，同时设置div隐藏区域以外的区域（overflow：hidden；）

　　　　   第四是设置当div被hover时，伪元素before回到div父元素的最左侧，并设置持续时间。

　　　　这样就完成了下划线在hover时从左侧并入。如果要从右侧出现，则只需把相应位置进行更新即可。

2.下划线从中间向两边伸出

?

1 2 3 4 5 6 7 8 9 10 11 12 13

div::before{     content:"";     width:0px;     position:absolute;<br>　　display：inline-block；     border-bottom:0px solid red;     bottom:0;     left:50%；     transition:all linear 1s;} div:hover::before{ left:0; width:50px; border-bottom-width:2px; }

　　下划线从中间向两边伸出大部分与下划线从两边伸出相似，不同之处在于：

　　　　首先设置子元素位置在中间，即left：50%，同时width：0px；

　　　　其次hover时设置子元素位置右中间变到最左侧（即left：0；）；同时设置子元素的宽度（即width：50px）。

 　　这样就能实现两个过程：一是下划线从中间向左侧整体移动，二是下划线向右侧延伸。