为什么项目卡片的下划线消失了？一次 AppleBurstPerfect 调试记录
最近在 src/components/ui/projects-stepper.tsx 中给项目卡片的时间与技术标签添加下划线样式，看起来再简单不过。但刷新页面后却发现：页面上完全看不到任何下划线。这篇笔记记录了从现象到定位、再到最终修复的全过程。
现场现象
- [症状] 浏览器中没有看到下划线效果，仿佛样式没有被应用。
- [线索] DevTools 查看元素时，能够看到我们刚加上的
underline类名，却没有对应的视觉呈现。
初步假设
- [假设1] Tailwind 类名没有生效？
- [假设2] 有更高优先级的样式覆盖了
text-decoration？ - [假设3] 卡片在动画阶段被替换或隐藏？
这些猜测带来了不少误导，直到我注意到页面结构里似乎存在两套项目卡片。
深扒结构：为什么有两层卡片？
项目页的过场动画来自 src/components/ui/apple-burst-perfect.tsx。为实现苹果官网招聘页那种“先播放彩色爆发，再滑入正文”的体验，代码里动态创建了一组 overlay 卡片，依次在 Hero 区播放。
当动画完成后，overlay 卡片淡出，ProjectsStepper 中的真正内容才进入视野。也就是说：
- overlay 卡片（
data-overlay-project）先显示 - 内容区卡片（
data-project-step）随后接力
我们最初的下划线样式只加到了内容区的卡片模板里，自然无法影响前一阶段的 overlay 卡片。
Root Cause：双模板导致的错觉
- [根因] overlay 卡片模板在
apple-burst-perfect.tsx里创建，未同步最新的样式。 - [表现] 动画阶段看到的卡片仍旧是旧样式，即便内容区模板已经更新。
解决方案
- [同步样式] 在
src/components/ui/apple-burst-perfect.tsx中，为动态创建的日期与技术标签元素添加同样的underline类：
// 日期
const datesEl = document.createElement("p");
datesEl.className = "text-xs font-semibold uppercase tracking-[0.36em] text-white/65 underline underline-offset-4";
// 技术标签
const tagEl = document.createElement("span");
tagEl.className = "rounded-full bg-white/12 px-3 py-1 underline underline-offset-2";- [保持一致性] 内容区的卡片模板继续保留相同的样式，确保动画前后视觉一致。
验证
- [桌面端] 滚动播放过场动画，Hero 阶段与内容区卡片都显示下划线。
- [移动端] 通过响应式模拟器确认 overlay 卡片也继承了样式。
经验总结
- [拆分视图要同步样式] 动画过场常常会复制 DOM，在修改样式时别忘了所有模板。
- [DevTools 是好朋友] 观察 DOM 结构的层级与数据属性（如
data-overlay-project）能快速确认实际渲染的节点。 - [维护可复用模板] 若时间允许，可以考虑把卡片结构抽成可复用组件，避免双处维护。
写在最后
一次“看不见的下划线”背后，其实是多层渲染策略带来的同步问题。希望这篇调试记录能提醒未来的自己：任何动画或过场效果，只要有动态 DOM，就要注意样式的双重维护。
