css文字下划线效果

css文字下划线效果

使用css实现下划线在鼠标放上去从左往右,离开也是从左往右的效果

利用 :hover 改变下划线的宽度，来实现这个效果

宽度改变的方向是从元素的定位来决定的，所以初始右定位设为0，在鼠标移上去后改为左定位。

所以改变下划线移动的方向，改变它的定位即可。

下面上代码
css部分

.bg {
    width: 200px;
    height: 30px;
    margin: 200px auto;
    text-align: center;
    line-height: 30px;
}

.bg a {
    position: relative;
    text-decoration: none;
    font-size: 16px;
    line-height: 30px;
    color: #000000;
}

.underline {
    position: absolute;
    bottom: -5px;
    right: 0;     /* 初始右定位  */
    width: 0;     /* 初始宽度为0  */
    height: 2px;
    background-color: skyblue;
    transition: all 0.3s linear;
}

a:hover .underline {
    left: 0;         /* 鼠标放上去给下划线左定位*/
    width: 100%;     /* 宽度改为父元素的宽度  */
}

html部分

    
    
    
    



    

        我是文字 

    

效果图 后面有时间补