CSS实现hover时卷边+下划线左右延伸效果

ul li{
    width: 30%;
    position: relative;  
    display: inline-block; /* 确保li元素是内联块级元素，以便伪元素可以正确定位 */  
  }
ul li img{
    width: 100%;
    box-shadow: 0px 5px 10px 0px rgb(187, 187, 187);
    transition: all 0.5s;
  }
ul li img:hover {
    border-bottom-right-radius: 50px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
  }
ul li::after {  
    content: ""; /* 伪元素需要content属性，即使它是空的 */  
    position: absolute;  
    left: 0;  
    bottom: 0;  
    width: 0; /* 初始宽度为0 */  
    height: 2px; /* 下划线的高度 */  
    background-color: #4095E5; /* 下划线的颜色 */  
    transition: width 0.3s ease; /* 宽度变化的过渡效果 */  
  }  
 ul li:hover::after {  
    width: 100%; /* 鼠标悬停时，宽度变为100% */  
  }