仅使用纯 CSS 即可为 Bootstrap 侧边栏图标添加悬停时文字标签的平滑滑入动画，通过控制 width、overflow 和 transition 属性实现宽度渐变展开效果，无需任何 JavaScript。
仅使用纯 css 即可为 bootstrap 侧边栏图标添加悬停时文字标签的平滑滑入动画，通过控制 `width`、`overflow` 和 `transition` 属性实现宽度渐变展开效果，无需任何 javascript。
在现代前端开发中，追求“零 JS 交互”不仅能提升性能，还能增强可维护性与可访问性。针对侧边栏图标悬停显示文字标签（如 Bio、Tags）这一常见需求，完全可通过 CSS 的 transition 配合 width + overflow: hidden 实现流畅的滑入动画。
核心思路是：将 .nav-title 设为 inline-block，初始 width: 0 并隐藏溢出内容；悬停时设置一个预估的固定宽度（如 50px），配合 transition: width 500ms ease 触发平滑过渡。注意必须显式声明 display: inline-block（而非 inline），否则 width 在内联元素上无效；同时 overflow: hidden 确保文字被精准裁剪。
以下是完整可运行的 CSS 代码（已优化兼容性与可读性）：
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
.nav-pills .nav-link > .nav-title {
display: inline-block;
width: 0;
overflow: hidden;
white-space: nowrap; /* 防止文字换行影响宽度计算 */
padding-left: 8px; /* 提供图标与文字间距 */
transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* 更自然的缓动曲线 */
vertical-align: middle;
}
.nav-pills .nav-link:hover > .nav-title {
width: 72px; /* 根据最长文本微调（如 "Documentation" 约需 96px） */
}? 关键注意事项：
立即学习“Java免费学习笔记（深入）”；
- ✅ 必须移除 HTML 中
<span class="d-none nav-title"></span>的d-none类（Bootstrap 的d-none会强制display: none，覆盖 transition）； - ✅ 若文字长度差异大（如含 “Dashboard” 和 “Home”），建议统一用
min-width或改用max-width+opacity/transform组合方案提升鲁棒性； - ⚠️
width过渡对中文/等宽字体更稳定；若需完全自适应宽度，可考虑transform: scaleX(0)→scaleX(1)替代（但需额外处理布局偏移）； - ? 兼容所有现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）。
最终效果：鼠标悬停图标时，文字从左向右平滑滑出，收起时反向收缩，视觉干净、响应迅速，且完全符合渐进增强原则——即使 CSS 未加载，文字仍以默认方式可见（无障碍友好）。
