css实现鼠标放到按钮中下划线动态显示

效果

#实现方式
menu_index为我的按钮的类

.meun_index::after{
  content: '';
  background: #776886;
  position: absolute;
  width:100%;
  height: 3px;
  bottom:-5px;
  left:0;
  transform: scaleX(0);
  transform-origin:bottom right ;
  transition: transform 0.4s ease-in-out;
}
.meun_index:hover::after{
  transform: scaleX(1);
  transform-origin: bottom left;
}

解析

首先，通过.meun_index::after选择器，选择具有.meun_index类的元素的伪元素::after。
然后，定义了以下样式属性：
content: ‘’：插入一个空内容。
background: #776886：设置下划线的背景颜色为#776886。
position: absolute：将伪元素的定位方式设置为绝对定位。
width: 100%：将伪元素的宽度设置为100%，使其水平方向上填满父元素的宽度。
height: 3px：设置下划线的高度为3像素。
bottom: -5px：将伪元素的底部边缘相对于父元素的底部边缘向上偏移5像素。
left: 0：将伪元素的左边缘与父元素的左边缘对齐。
transform: scaleX(0)：将伪元素沿X轴进行水平缩放，设置为0，隐藏下划线。
transform-origin: bottom right：将伪元素的变换原点设置为右下角。
transition: transform 0.4s ease-in-out：定义了伪元素的过渡效果，使下划线在变化时平滑过渡。
接下来，使用.meun_index:hover::after选择器定义了鼠标悬停时伪元素::after的样式。
transform: scaleX(1)：将伪元素沿X轴进行水平缩放，设置为1，显示下划线。
transform-origin: bottom left：将伪元素的变换原点设置为左下角。
因此，当鼠标悬停在具有.meun_index类的元素上时，下划线将通过过渡效果从隐藏状态渐渐显示出来，从右到左延伸。当鼠标移开时，下划线将通过过渡效果再次隐藏。