本文主要介紹了利用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>
相關推薦：
javascript表格隔行變色加滑鼠移入移出及點選效果的方法_javascript技巧
#以上是詳解css3和偽元素實現滑鼠移入時底線向兩邊展開的詳細內容。更多資訊請關注PHP中文網其他相關文章！
