css-鼠标经过文字底部下划线动画

要实现鼠标经过文字底部下划线动画，可以通过CSS的伪类选择器和过渡动画来完成。

首先，在HTML中添加需要添加动画效果的文字，可以使用<span>标签或其他元素包裹文字。例如：

<p>这是一个<span class="underline-animation">动画效果</span>的文字。</p>

然后，在CSS中设置伪类选择器: hover来实现鼠标经过文字的效果，并通过利用伪类选择器:before来添加下划线。例如：

.underline-animation {
  position: relative;
  display: inline-block;
}

.underline-animation:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000; /* 下划线的颜色 */
  transform: scaleX(0); /* 初始时下划线不可见 */
  transition: transform 0.3s ease-in-out; /* 过渡动画效果 */
}

.underline-animation:hover:before {
  transform: scaleX(1); /* 鼠标经过时下划线慢慢变为可见 */
}

以上的CSS代码中，给包裹文字的元素添加了类名"underline-animation"，通过设置该类名选择器下的:before伪类选择器来添加下划线。通过将transform: scaleX(0)初始时下划线设为不可见，然后通过:hover伪类选择器来实现鼠标经过时下划线逐渐可见的效果。

最后的transition属性则是设置了下划线变化时的过渡动画效果，通过设置transform属性的transition来实现下划线的平滑过渡。可以根据需求调整过渡效果的时间和缓动函数。