直接用group+group-hover可实现知乎式悬停下划线平滑伸展：通过group绑定父容器hover状态，group-hover:after:w-full触发伪元素宽度过渡，配合transform:scaleX()和relative/absolute定位确保从左到右匀速展开，需避免overflow裁剪、align-items干扰及移动端伪hover闪动。
直接用 group + group-hover 就能实现知乎那种「悬停下划线平滑伸展」的效果，不需要 JS，也不依赖伪元素手动写动画。
为什么知乎导航栏动效看起来很顺？
它不是简单地改变颜色或加 border-bottom，而是让一条细线从左到右匀速展开——本质是控制 transform: scaleX() 的过渡。Tailwind 的 group 机制刚好能绑定父容器 hover 状态，并把样式透传给子元素。
常见错误是试图对 a 标签本身加 hover:scale-x-100，但 scale 只作用于自身，无法实现「从左侧起点开始伸展」的视觉效果；必须用一个独立的 span 作为下划线载体，并让它继承父级 group 的 hover 状态。
- 下划线元素必须是
a的子元素（如<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-500 transition-transform duration-300 ease-in-out group-hover:w-full"></span>） -
a必须带relative，否则absolute子元素定位会错乱 - 不能用
border-b模拟，因为 border 不支持scaleX动画
如何写出可复用的 Tailwind 下划线类？
别每次手敲一长串 class。把动效逻辑抽成自定义工具类，写进 tailwind.config.js 的 theme.extend.container 或直接用 @layer utilities：
立即学习“前端免费学习笔记（深入）”；
@layer utilities {
.underline-slide {
@apply relative after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-blue-500 after:transition-all after:duration-300 after:ease-in-out group-hover:after:w-full;
}
}
然后在 HTML 中这样用：
知乎数据获取 - 极简设计，支持三级认证降级（Browser Profile → File Cookie → Fallback），确保数据可靠获取 Zhihu Data Fetcher - Minimalist design with three-level auth fallback (Browser Prof...
<a href="#" class="group px-4 py-2 text-gray-700 underline-slide">首页</a> <a href="#" class="group px-4 py-2 text-gray-700 underline-slide">发现</a>
注意：这个类名只是语义封装，实际生效的是内部的 group-hover:after:w-full —— 所以 a 上必须同时有 group 和 underline-slide，缺一不可。
移动端要不要保留 hover 动效？
要，但得关掉。iOS Safari 和 Android Chrome 在触摸设备上会触发一次 hover（伪 hover），导致下划线闪一下就消失，体验极差。用 hover:underline-slide focus:underline-slide 不够，得靠媒体查询屏蔽：
- 加
not-touch类（需自己定义）：@media (hover: hover) and (pointer: fine) { .not-touch { ... } } - 更稳妥的做法是直接用
md:hover:underline-slide，即只在中屏及以上启用 hover 动效 - 千万别写
hover:underline-slide md:hover:underline-slide—— 小屏也会生效，且重复冗余
如果项目已用 prefers-reduced-motion 做无障碍适配，记得同步加 motion-safe:hover:underline-slide，否则动画可能被系统强制禁用。
为什么有时下划线不居底或宽度不对？
根本原因不是 class 写错，而是布局干扰。最常踩的三个坑：
-
a外层被flex容器设置了align-items: center，但relative+absolute需要明确的 baseline 参照 —— 改成align-items: flex-start或给a加h-full - 父容器用了
overflow-hidden（比如导航栏整体加了圆角和 shadow），会把伸展中的下划线裁掉 —— 改用clip-path或移除 overflow - 字体用了非默认字号（如
text-sm），但h-0.5是基于 1rem 计算的，实际线高变细 —— 改用h-px更稳定
真正难调的从来不是动画本身，而是它嵌在真实 DOM 结构里时，被各种 flex、grid、transform、overflow 共同挤压出的边界问题。
