css下划线移动

CSS下划线移动是一种能够增强网页美观度的技巧，下面我们将简单介绍如何使用 CSS 实现这种效果。

a {
  text-decoration: none; /* 取消下划线 */
  position: relative; /* 相对定位 */
}

a:after {
  content: '; /* 内容为空 */
  display: block; /* 块级元素 */
  width: 100%; /* 宽度为父元素宽度 */
  height: 2px; /* 下划线高度 */
  background: red; /* 下划线颜色 */
  position: absolute; /* 绝对定位 */
  bottom: -2px; /* 距离底部的偏移量 */
  left: 0; /* 左对齐 */
  transition: all .2s ease-in-out; /* 过渡效果 */
}

a:hover:after {
  width: 0; /* 鼠标悬停时将宽度设置为0，使下划线向左滑动 */
} 

上述代码通过为链接添加伪元素 :after 来实现下划线，content 属性为空，这意味着此元素不会在页面中显示任何内容。通过 position 属性的相对定位，我们使得下划线相对于链接元素定位；通过 bottom 属性将下划线向下偏移，使其处于链接文字下方。当鼠标悬停于链接上时，我们可以通过 :hover 和 transition 属性来控制下划线的滑动效果，让它向左滑动。

如果要改变下划线的颜色和高度，只需在样式中修改相应属性即可。如果需要在整个网页中统一使用此样式，可以将其添加到 CSS 文件中。