使用CSS实现鼠标悬浮标题出现动态下划线

您可以使用CSS的伪类:hover来实现鼠标悬浮时的动态下划线效果。以下是一个简单的示例代码：

HTML:

<h1 class="dynamic-underline">悬浮查看动态下划线</h1>

CSS:

.dynamic-underline {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: #000; /* 文字颜色 */
}
 
.dynamic-underline:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000; /* 下划线颜色 */
  transition: transform 0.3s ease-out; /* 动画过渡效果 */
  transform: scaleX(0); /* 初始状态下下划线不可见 */
}
 
.dynamic-underline:hover:before {
  transform: scaleX(1); /* 鼠标悬浮时下划线完全可见 */
}

在这个示例中，.dynamic-underline 类定义了标题的基本样式，并且使用了伪类 :before 来创建一个动态的下划线。通过改变 transform 属性的 scaleX 值，可以控制下划线从完全不可见到完全可见的过渡效果。鼠标悬浮时，下划线由左侧由不可见逐渐变为完全可见。