鼠標移入時下劃線向兩邊展開的效果

記錄一下之前一直感覺很不錯的 菜單移入效果。就是當鼠標移入後 下滑線向兩邊緩慢延展的效果

實現這個功能 主要是使用了僞類元素 :befor :after

核心代碼是：

html

<p class="navP">管理</p>

css中

.navP {
            width: 150px;
            position: relative;
            height: 58px;
            line-height: 58px;
            cursor: pointer;
        }

.navP:before,.navP:after{
            content: '';
            width: 0;
            height: 2px;
            background-color: @activeColor;
            position: absolute;
            top: 100%;
            left: 50%;
            transition: all 0.8s;
}

.navP:before:hover{
    width:50%;
    left:0px;
}

.navP:after:hover{
    width:50%;
    right:0px;
}

就是首先先將僞類元素定位到元素的中間位置，在 鼠標移入後給僞類元素添加寬度 和位置  這樣就transition過渡的時候就可以展現出比較好的效果了。