直接用border-bottom会撑高行框、偏移基线并引发hover抖动；应改用position: relative的a配合::after伪元素+absolute定位+bottom微调实现独立可控下划线。

直接用 border-bottom 会撑高、错位，别这么干

给 li 或 a 直接加 border-bottom: 2px solid #007bff 看似快，但实际问题一堆：行高被拉高、文字基线偏移、hover 时边框突然出现导致布局抖动。更糟的是，如果导航项用了 flex 或 line-height 微调，下划线常贴底压字，或悬在半空。

真正可控的做法是把下划线做成独立视觉层：

• a 必须设 position: relative（否则伪元素无法精确定位）
• 用 ::after 生成下划线节点，position: absolute + bottom: -4px（数字按字体微调）
• 初始 width: 0，hover 时设 width: 100%，配合 transition: width 0.3s ease
• 避免用 margin-left 或 left 做位移——它会触发重排，动画卡顿

text-decoration 在导航里基本不可控

对 a 写 text-decoration: underline，看着简单，实则埋雷：

• 下划线位置由字体基线决定，中英文混排时高度不一致
• text-underline-offset 在 Safari 15.4 之前不支持，旧版 iOS 直接忽略
• 无法单独控制粗细（text-decoration-thickness 兼容性差），也不能 hover 时才出现
• 如果导航用了 font-size: 1.2em 或自定义字体，下划线常被截断或浮高

除非你只要静态、无动画、全兼容的“能看就行”效果，否则别碰它。

需要滑动跟随？必须用 JS 动态算尺寸

纯 CSS ::after + :hover 只能实现“各自 hover 各自动”，做不到下划线从一个菜单项平滑滑到另一个。要真·跟随，得靠 JS：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 监听 mouseenter，用 getBoundingClientRect() 读目标 a 的 left 和 width
• 下划线容器（比如一个 ）放在导航外层，设 position: absolute
• 每次 hover 更新它的 style.transform = translateX(${left}px) 和 style.width = ${width}px
• 窗口 resize 后必须重新测量所有项——漏掉这步，响应式切换后下划线就飘了
• 首次渲染完立刻执行一次定位，否则页面加载后下划线默认在左上角不动

移动端点击区域窄，伪元素不响应点击

用 ::after 做下划线时，线条本身是伪元素，默认 pointer-events: none，点它不会触发 a 的跳转。这不是 bug，是规范行为。

用户手指划过下划线区域却没反应，体验极差。解决方法只有两个：

• 给 a 加足够 padding-bottom（比如 padding-bottom: 8px），把热区往下扩，盖住下划线位置
• 或者放弃伪元素，改用真实 插入每个 a 内部——虽然 DOM 多一点，但可确保点击穿透无死角

别指望靠 pointer-events: auto 拉回来，button 和 a 标签对伪元素的事件支持本就不一致，尤其在 Android WebView 里表现分裂。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！