Card标题下划线动画需手动添加CSS，Bootstrap默认不提供；推荐用border-bottom配合transition实现，避免text-decoration位置不可控问题。
Card标题下划线动画需要自己加CSS，Bootstrap默认不提供
Bootstrap的 .card-title 是纯文本样式，没有:hover下划线效果。想实现悬停下划线，得手动补充CSS规则，不能只靠类名堆砌。
常见错误是直接给 .card-title 加 text-decoration: underline，结果下划线紧贴文字底部、无过渡、无偏移，视觉生硬。
- 推荐用
border-bottom模拟下划线：更易控制粗细、颜色、间距和动画 - 必须显式设置
display: inline-block或display: inline，否则border-bottom在块级元素上会撑满整行 - 动画需声明
transition，且建议只过渡border-bottom和padding-bottom，避免重排
如何写兼容性好、不破坏Card布局的CSS
直接在 .card-title 上改会影响所有卡片标题，建议用自定义类（如 .title-underline）隔离作用域。
.card .title-underline {
display: inline-block;
padding-bottom: 4px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s ease, padding-bottom 0.2s ease;
}
<p>.card .title-underline:hover {
border-bottom-color: #0d6efd; /<em> Bootstrap主色 </em>/
padding-bottom: 2px;
}注意点：
-
padding-bottom先设为 4px，hover 时减到 2px，让下划线“上浮”靠近文字，视觉更紧凑 - 不用
text-decoration是因为它的位置不可控，且 Safari 对text-underline-offset支持晚（v15.4+），老版本会失效 - 如果卡片标题用了
<h3>等语义标签，确保该标签没被其他CSS重置掉display值
在Vue/React里动态加类要注意什么
框架里别直接操作DOM加class，要用响应式绑定。但容易忽略的是：如果标题内容动态变化，需防重绘导致动画重置。
- Vue 中用
:class="{ 'title-underline': isHoverable }"，别用@mouseenter手动 toggle class - React 中同理，用
className={clsx("card-title", { "title-underline": hoverEnabled })} - 若标题含图标或 Badge，确保它们不在
.title-underline内部，否则也会被加下划线——把图标放.card-title外侧更稳妥
移动端触摸设备怎么处理hover效果
纯 :hover 在 iOS Safari 和 Android Chrome 上对触摸屏无效（除非模拟 hover），所以不能只依赖它。
- 若需真触控反馈，改用
:active+ JS 添加临时 class，但动画时间要短（0.1s），否则用户感觉卡顿 - 更务实的做法：保留
:hover给桌面，不额外适配移动端——多数卡片标题在移动端本就不靠悬停触发交互 - 测试时用 Chrome DevTools 切换 device mode，选 “No throttling” + “Emulate touch screen”，确认下划线不意外触发
真正麻烦的是嵌套在 .card-header 里的标题，或者用了 .card-title.text-center 的场景——这时候 inline-block 会让居中失效，得用 text-align: center 配合 width: fit-content 微调。这种细节，不实测很容易漏。
