链接动画下划线生成器（CSS）
选择效果，然后把鼠标移到预览中的链接上（或按 Tab 键）。代码使用 background-size，适用于多行链接。
使用方法会动的链接下划线
这段文字里有 一个短链接 ，还有 一个很长的链接，在手机上可能会折成两行 ，用来测试效果。
可用语言: 
广告
链接动画下划线生成器（CSS）: 用途
悬停时动起来的下划线能让菜单和文字中的链接更精致。用 ::after 制作只适用于单行链接；本生成器用 background-image 绘制线条并对 background-size 做动画，即使链接换行也有效。
可选五种效果（从左侧延伸、从中间延伸、滑动、荧光笔和波浪）、颜色、粗细和时长。默认始终显示一条细线，使链接与文字区分开，符合 WCAG 1.4.1 的要求，键盘聚焦时也会出现效果。
使用方法
- 选择效果。
- 调整颜色、粗细和时长。
- 复制 CSS，并给链接应用该类名。
使用场景
- 导航菜单。
- 文章中的链接。
- 页脚和链接列表。
常见问题
为什么用 background 而不是 ::after？
使用 ::after 伪元素时，线条只对单行链接有效。用 background-image 绘制下划线并对 background-size 做动画，即使链接换行成两行，线条也会跟随文字。
链接还像链接吗？
在段落中间，即使没有鼠标悬停，链接也要与正文区分开（WCAG 1.4.1）。因此“始终显示细线”选项默认勾选；动画效果叠加在它上面。
手机上呢？
手机上没有悬停；效果会在聚焦和点击时出现。始终可见的底线确保链接能被识别。
真的免费吗？
是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。