css下划线滑动特效

当我们在进行网页设计时，很多情况下会使用下划线来突出文字，但是简简单单的下划线会给网页带来单调的感觉，那么如果我们能够给下划线添加一些特效呢？这时候，我们可以考虑使用CSS下划线滑动特效。

/*CSS代码*/
a {
  position: relative;
  text-decoration: none;
}

a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: black;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

a:hover::before {
  visibility: visible;
  transform: scaleX(1);
} 

通过上面的CSS代码，我们可以看到下划线滑动的效果是通过在a标签的before伪元素中设置了一个宽度为100%、高度为1px的线条，并将其放置在原文字的下方。同时，在普通状态下，这条横线是不可见的，但是当我们将鼠标放到链接上时（:hover），线条的可视性将变成可见，并通过transform属性的scaleX函数实现横向扩张的效果，这样就形成了下划线滑动的效果。

<!--HTML代码-->
<a href="#">点击这里试试看下划线特效</a> 

最后，结合上述代码，我们可以在自己的网页中添加上下划线滑动的效果，来实现更好的新颖炫目的显示效果。