必须用::before或::after而非border-right，因连字宽度异常、中英文基线浮动、旧Safari对transparent支持差；::before纯渲染层操作，定位可控，需position:relative+absolute+right:0+top:50%+transform:translateY(-50%)+em宽度。
为什么必须用 ::before 或 ::after 而不是 border-right
直接给文字容器加 border-right 看似简单，但实际会漂移：连字（如 fi）被当做一个字符，宽度却≠单字宽；中英文混排时基线浮动，光标常偏高；旧版 Safari 对 border-color: transparent 切换支持差，容易卡顿或跳帧。而 ::before 是纯渲染层操作，不参与布局计算，定位完全可控。
::before 光标如何精准锚定到文本末尾
关键就三行 CSS，缺一不可：
- 文字容器必须设
position: relative（不能是 body 或外层 wrapper） -
::before设position: absolute; right: 0; top: 50%; transform: translateY(-50%) - 宽度用
width: 0.08em这类 em 单位，不用 px 或百分比
其中 right: 0 是硬钉在容器右边界——不管文本是否被 steps() 截断、是否响应式缩放，它永远“贴着可见区域最右端”。transform: translateY(-50%) 是唯一跨字体可靠的垂直居中方式；top: 50% + margin-top: -0.4em 在不同 line-height 下必然错位。
光标动画的 animation-delay 必须严格等于打字总时长
这不是建议，是硬同步条件。例如打字动画写成 animation: typing 4s steps(20, end)，说明每字耗时 0.2s，总时长就是 4s。光标动画就必须是：
animation: blink 1s step-end infinite; animation-delay: 4s;
常见错误：
- 写成
animation-delay: 3.9s或4.1s→ 光标提前闪或滞后闪 - 文本由 JS 动态注入时，没重算 delay：
el.style.setProperty('--delay', `${text.length * 0.2}s`) - 直接让光标
infinite自启动 → 字还没打完，光标已狂闪两秒
兼容性兜底和性能陷阱
旧版 Safari（≤16.6）和部分安卓 WebView 不会为伪元素上的 transform 自动创建合成层，光标容易掉帧。补一句 will-change: transform 可强制提升图层。另外，如果父容器有 padding-right，::before 的 right: 0 会相对于 padding 边界定位，导致光标悬空——此时得手动减去该值：right: calc(0px - var(--pr, 0px))，并在容器上定义 --pr: 8px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
