css3、偽元素實現滑鼠移入時下劃線向兩邊展開效果的實例展示

這篇文章主要介紹了利用css3+偽元素實現滑鼠移入時下劃線向兩邊展開效果的相關資料，文中先進行了詳細的介紹，方便大家理解，而後給出了完整的實例代碼讓大家可以參考學習，需要的朋友們下面來一起學習學習吧。

先來看看效果圖：

實作想法：

將偽元素:before和:after定位到元素底部中間，設定寬度從0變成100%達到目的。

實作方法：

1、先定義一個區塊狀元素（行內元素沒有寬高）並修改樣式為一個背景色為淺灰色的矩形，設定相對定位。

html程式碼

<p id="underline"></p>

css樣式

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

2、設定:before和:after兩個偽元素，將其設定為背景色為藍色（也就是底線的顏色），利用絕對定位將兩個元素固定在#underline底部中間位置。

css樣式

#underline:before,

#underline:after{

    content: "";/*单引号双引号都可以，但必须是英文*/

    width: 0;

    height: 3px; /*下划线高度*/

    background: blue; /*下划线颜色*/

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s ; /*css动画效果，0.8秒完成*/

}

3、設定滑鼠移入效果。

css樣式

#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/

    left:0%; 

    width:50%;

}

#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/

    left: 50%; /*这句多余，主要是为了对照*/

    width: 50%;

}

#優化

1、雖然目的達到了，但用了兩個偽元素，一個向左延伸50%，一個向右延伸50%，只用一個延伸至100%能否達到目的呢？
 

css程式碼

#underline:after{

    content: "";

    width: 0;

    height: 5px;

    background: blue;

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s;

}

#underline:hover:after{/*原理是left:50%变成0%的同时，宽度从0%变成100%*/

    left: 0%;

    width: 100%;

}

2、只定義:after偽元素，將其從距離左邊50%寬度為0的同時改變成距離左邊0%寬度為100%就可以實現，從而達到了精簡程式碼的目的，而且還多餘出了:before方便進行別的操作。

完整程式碼

    

    

    





    <p id="underline"></p>

以上是css3、偽元素實現滑鼠移入時下劃線向兩邊展開效果的實例展示的詳細內容。更多資訊請關注PHP中文網其他相關文章！