Bootstrap如何让Card卡片的标题在鼠标经过时出现下划线动画-Bootstrap教程-PHP中文网

必须为.card-title显式设置position: relative，否则::after伪元素会相对于body定位导致错位；使用transform: scalex()配合transition实现从左到右下划线动画，避免border-bottom和width动画的缺陷。

bootstrap如何让card卡片的标题在鼠标经过时出现下划线动画

直接给 .card-title 加 ::after 伪元素 + transform: scaleX() 就能实现，但必须确保父容器有 position: relative，否则下划线会飘走。

为什么 `.card-title:hover` 加 `border-bottom` 不行

因为 border-bottom 是盒模型边框，无法做平滑缩放动画；强行用 transition: border-bottom 只能淡入淡出，不是“从左到右展开”的效果。更关键的是：.card-title 默认是 <h5></h5> 或 <div>，没有 <code>position: relative，::after 一加就定位错乱——你看到的“没反应”或“下划线在页面顶部闪一下”，基本都是这个原因。

.card-title 必须显式设 position: relative，否则 ::after 会相对 body 定位
别用 width 动画：它在 inline 元素上无效，且触发重排，移动端卡顿
不要写 .card:hover .card-title::after —— 这会让整个卡片悬停才触发，不符合“只标题响应鼠标”的需求

`.card-title::after` 的最小可行写法

以下代码可直接复制进 CSS 文件（确保在 Bootstrap CSS 之后加载）：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

.card-title {
  position: relative;
}
.card-title::after {
  content: '';
  position: absolute;
  bottom: -0.25rem; /* 对齐文字基线，比 0 更稳 */
  left: 0;
  width: 100%;
  height: 2px;
  background: #0d6efd;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.card-title:hover::after {
  transform: scaleX(1);
}

bottom: -0.25rem 比 bottom: 0 更可靠，避开字体 descender 影响
transform-origin: left center 确保从左端开始展开；若标题用了 text-transform: uppercase，改用 left bottom
动画时间写在初始态（非 hover），否则不触发

遇到下划线错位或不显示的排查点

常见失效场景不是代码写错，而是布局干扰：

.card-header 或 .card-body 设了 overflow: hidden —— 下划线被裁掉，去掉或改用 overflow: visible
.card-title 外层被包在 <a></a> 里但没设 display: inline-block —— 导致 width: 100% 失效，加 display: inline-flex 或 inline-block
自定义 class（如 .my-card）没提升选择器权重，被 Bootstrap 原生样式覆盖，改用 .my-card .card-title::after
用了 Sass/SCSS 但没在 _custom.scss 里 @extend 或 @include，导致编译后规则丢失