下划線hover下動態出現技巧

    酷炫的動畫效果往往更能吸引眼球，下面我將分享純CSS中，hover的時候出現下划線動態飛入的技巧。

1.下划線從左側飛入：

div::before{
    content:"";
    width:50px;
    position:absolute;
　　display:inline-block;
　　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.下划線從中間向兩邊伸出

div::before{
    content:"";
    width:0px;
    position:absolute;
　　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）。

 　　這樣就能實現兩個過程：一是下划線從中間向左側整體移動，二是下划線向右側延伸。