CSS实现元素hover时背景色拉伸渐变

HTML代码 

<ul><li><p><a href="#">Facebook搜索</a></p></li><li><p><a href="#">Instagram搜索</a></p></li><li><p><a href="#">Google搜索</a></p></li><li><p><a href="#">YellowPage搜索</a></p></li><li><p><a href="#">Yelp搜索</a></p></li><li><p><a href="#">WhatsApp搜索</a></p></li><li><p><a href="#">群发消息</a></p></li></ul>

CSS代码

 ul li{cursor: pointer;width: 45%;padding: 30px;display: flex;margin-bottom: 20px;border-radius: 20px;box-shadow: 0 10px 10px #ECEFF7;transition: all 0.5s;background: linear-gradient(to right, transparent 0%, transparent 100%);position: relative;overflow: hidden;}ul li::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to right, transparent 0%, #4095E5 100%);transform: scaleX(0);transform-origin: left;transition: transform 0.5s;z-index: 0;}ul li:hover::before {transform: scaleX(1);}ul li:hover{transform: scale(1.05);/* background: linear-gradient(to right, transparent 0%, #4095E5 100%); */}ul li * {position: relative;z-index: 1;}

 效果图