? ? 酷炫的動畫效果往往更能吸引眼球，下面我將分享純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）。

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

轉載于:https://www.cnblogs.com/zhangzhiyong/p/9538936.html

總結

以上是生活随笔為你收集整理的下划线hover下动态出现技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。