必须为.card-title显式设置position: relative，否则::after伪元素会相对于body定位导致错位；使用transform: scaleX()配合transition实现从左到右下划线动画，避免border-bottom和width动画的缺陷。
直接给 .card-title 加 ::after 伪元素 + transform: scaleX() 就能实现，但必须确保父容器有 position: relative，否则下划线会飘走。
为什么 .card-title:hover 加 border-bottom 不行
因为 border-bottom 是盒模型边框，无法做平滑缩放动画；强行用 transition: border-bottom 只能淡入淡出，不是“从左到右展开”的效果。更关键的是：.card-title 默认是 <h5> 或 <div>，没有 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>里但没设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，导致编译后规则丢失
真正麻烦的不是写几行 CSS，而是确认 .card-title 所在的 DOM 节点有没有被其他样式悄悄改了定位上下文或溢出行为——这类问题只能靠开发者工具逐层检查 computed styles。
