CSS文本悬停在div内的下划线动画

是一种通过CSS样式来实现的效果，当鼠标悬停在一个div元素内的文本上时，会出现一个下划线动画效果。

这种效果可以通过CSS的伪类选择器和过渡动画来实现。下面是一个实现该效果的示例代码：

HTML代码：

<div class="container">
  <p class="text">悬停在我上面</p>
</div>

CSS代码：

.container {
  width: 200px;
  height: 100px;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  position: relative;
  display: inline-block;
}

.text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.text:hover::after {
  transform: scaleX(1);
}

在上面的代码中，我们首先创建了一个容器div，设置了宽度、高度和背景颜色。然后在容器内部创建了一个带有文本的p元素，并给它添加了一个类名"text"。

接下来，在CSS中，我们给文本元素设置了position: relative;，这是为了让伪元素::after相对于文本元素进行定位。

然后，我们使用::after伪元素来创建一个下划线，设置了它的位置、宽度、高度和背景颜色。初始状态下，我们将其宽度设置为0，通过transform: scaleX(0);来隐藏它。

最后，我们使用过渡动画transition来实现在鼠标悬停时，下划线的动画效果。当鼠标悬停在文本元素上时，我们将transform: scaleX(1);来将下划线的宽度逐渐变为100%，从而展现出动画效果。

这样，当鼠标悬停在文本上时，就会出现一个下划线动画效果。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云CSS样式开发
• 腾讯云前端开发
• 腾讯云云原生应用
• 腾讯云音视频处理
• 腾讯云人工智能
• 腾讯云物联网
• 腾讯云移动开发
• 腾讯云存储
• 腾讯云区块链
• 腾讯云元宇宙

请注意，以上链接仅为示例，实际使用时请根据具体需求和情况选择适合的腾讯云产品。