CSS链接悬停下划线自定义技巧

一分耕耘，一分收获！既然都打开这篇《CSS链接悬停下划线自定义方法》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

答案：通过设置a标签相对定位并移除默认下划线，利用::after伪元素创建可动画的自定义下划线，悬停时通过width从0到100%实现伸展效果，结合transition控制动画节奏，可进一步定制颜色、位置和展开方式以获得更精致的视觉表现。

想要自定义CSS链接悬停时的下划线样式，使用 ::after 伪元素结合 content 和 transition 是一种灵活且视觉效果出色的方法。这种方法可以让你完全控制下划线的长度、颜色、位置、动画等，而不是依赖浏览器默认的 text-decoration: underline。

1. 基础结构：移除默认下划线，设置相对定位

为了让 ::after 伪元素正确工作，需要先将链接设为相对定位，并清除默认的下划线。

a {
  text-decoration: none;
  color: #007acc;
  position: relative;
}

2. 使用 ::after 创建自定义下划线

通过 ::after 插入一个伪元素作为下划线，默认隐藏或缩小，悬停时展开。

a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #007acc;
  transition: width 0.3s ease;
}

• content: ''：必须存在，否则 ::after 不会显示
• bottom: -2px：控制下划线距离文字的位置
• width: 0：初始状态下无宽度，实现“伸展”动画
• transition：添加平滑过渡效果

3. 悬停时显示完整下划线

当鼠标悬停时，将伪元素的宽度设为100%，实现下划线展开动画。

a:hover::after {
  width: 100%;
}

4. 进阶样式建议

你可以进一步美化效果：

• 改变下划线颜色：background: linear-gradient(...)
• 调整动画缓动：ease-in-out 或 cubic-bezier(.4,0,.2,1)
• 从中心向两边展开：left: 50% + transform: translateX(-50%)，再配合 width 变化
• 添加延迟或颜色渐变过渡

终于介绍完啦！小伙伴们，这篇关于《CSS链接悬停下划线自定义技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！