仅使用 CSS 的 transition 与 width + overflow: hidden 组合，即可为导航图标旁的标题文字添加平滑滑入动画，无需 JavaScript。关键在于将文字容器设为内联块、初始宽度为 0 并隐藏溢出，再通过 hover 触发宽度扩展。
仅使用 css 的 `transition` 与 `width` + `overflow: hidden` 组合，即可为导航图标旁的标题文字添加平滑滑入动画，无需 javascript。关键在于将文字容器设为内联块、初始宽度为 0 并隐藏溢出，再通过 hover 触发宽度扩展。
在构建响应式侧边栏导航（如 Bootstrap 的 .nav-pills）时，常需实现“图标 + 悬停显示文字”的交互效果。若追求轻量、高性能且避免 JS 介入，纯 CSS 动画是理想选择。核心思路不是控制 display（因其不可过渡），而是通过可过渡的属性——如 width、opacity 或 transform——配合 overflow: hidden 实现视觉上的“滑入”。
以下为推荐实现方案（已兼容 Bootstrap 5+ 与 Font Awesome 6）：
✅ 推荐 CSS 写法（平滑宽度过渡）
.nav-pills .nav-link > .nav-title {
display: inline-block; /* 必须为 block/inline-block 才能设置 width */
width: 0;
padding-left: 12px; /* 避免文字紧贴图标，提供可读间距 */
overflow: hidden;
white-space: nowrap; /* 防止文字换行破坏动画 */
transition: width 0.5s ease, opacity 0.3s ease;
opacity: 0;
vertical-align: middle;
}
.nav-pills .nav-link:hover > .nav-title,
.nav-pills .nav-link.active > .nav-title {
width: 80px; /* 根据最长文本微调，建议用 ch 或 em 更灵活 */
opacity: 1;
}? 为什么不用
display: none → inline？
因为display属性不可过渡（CSS transition 不支持）。改用width+overflow: hidden是业界通用技巧，既保证动画流畅，又保持语义结构清晰。
✅ HTML 结构优化建议
移除 d-none 类（它会强制 display: none，与动画逻辑冲突），直接由 CSS 控制显隐：
<a href="#" class="nav-link active"> <i class="fa-solid fa-book"></i> <span class="nav-title">Bio</span> <!-- 不加 d-none --> </a>
⚠️ 注意事项
-
宽度预设要合理：
width: 80px应略大于最长文本（如 “Documentation” 约需120px），可用ch单位提升可维护性（例如width: 10ch）； -
避免布局抖动：确保父级
.nav-link具备足够水平空间（Bootstrap 默认width: fit-content是安全的）； -
无障碍友好：保留文本内容（非仅靠
title属性），屏幕阅读器仍可访问.nav-title； -
移动端适配：若需在小屏隐藏文字，建议用媒体查询控制
width，而非移除动画逻辑。
✅ 进阶：更自然的「滑动+淡入」效果
结合 transform 可进一步增强动效表现力（推荐用于现代浏览器）：
立即学习“前端免费学习笔记（深入）”；
.nav-pills .nav-link > .nav-title {
transform: translateX(-10px);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.3s ease;
}
.nav-pills .nav-link:hover > .nav-title,
.nav-pills .nav-link.active > .nav-title {
transform: translateX(0);
opacity: 1;
}此写法无需精确控制 width，动画更柔和，且不依赖 overflow: hidden，容错性更高。
综上，纯 CSS 实现图标悬停文字滑入完全可行——关键在于放弃对 display 的依赖，转而利用可过渡属性构建视觉动效。代码简洁、性能优异，且天然支持服务端渲染与 SEO。
