css实现元素背景色从左侧滑动到右侧水平过渡

介绍

鼠标移入元素时，背景颜色从左侧滑倒右侧水平过渡

代码

html：

<div class="bg"></div>

css:

:root{
    
    
 	--normal-color: pink;
    --active-color: blue;
 }
 .bg{
    
    
     position: relative;
     width: 100px;
     height: 30px;
     background-color: var(--normal-color);
 }
 .bg:before,.bg:after{
    
    
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     width: 0;
     height: 100%;
     background: var(--normal-color);
     z-index: -1;
 }
 .bg:before{
    
    
     z-index: 1;
     background: var(--active-color);
     transition: 1s;
 }
 .bg:hover{
    
    
     background: transparent;
 }
 .bg:hover:before,.bg:hover:after{
    
    
     width:100%;
 }