css链接悬停时滑动的下划线效果

要实现链接在悬停时滑动的下划线效果，可以使用CSS的text-decoration属性结合:hover伪类和animation属性。以下是一个简单的示例代码：

@keyframes slide-underline {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
 
a {
  position: relative;
  color: #00f; /* 链接颜色 */
  text-decoration: none;
}
 
a:hover {
  text-decoration: none;
}
 
a:hover:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px; /* 下划线厚度 */
  background: #00f; /* 下划线颜色 */
  transition: width 0.3s ease; /* 动画过渡效果 */
  animation: slide-underline 0.3s forwards; /* 动画名称，时长，填充模式 */
}

在HTML中，你只需要正常定义链接：

<a href="https://example.com">链接文本</a>

当鼠标悬停在链接上时，slide-underline动画会触发，创建一个滑动的下划线效果。