光标必须用 ::before 伪元素实现，因其可脱离文本流精确定位；需设 right: 0 和 transform: translateY(-50%) 垂直居中；动画 delay 必须严格等于打字总时长，且需兼容性兜底如 will-change: transform。
光标必须用 ::before 或 ::after 单独控制，不能和打字动画共用一个 @keyframes；否则位置会漂移、缩放、或在多字体下错位。
为什么光标要用 ::before 而不是 border-right
用 border-right 模拟光标看似简单，但实际问题很多：
– 宽度单位（如 .15em）依赖父元素 font-size 和当前字体，遇到 font-variant-ligatures: common-ligatures 时，连字（如 fi）会被当做一个字符，但宽度≠单字宽，导致光标“悬空”
– border-right 无法垂直居中：它贴着行框底部，而文字基线浮动，尤其在混排中文字体+英文时容易偏高或偏低
– 旧版 Safari/安卓 WebView 对 border-color: transparent 的闪烁支持不稳定，常卡顿或跳帧
用 ::before 可以完全脱离文本流控制定位，且只影响渲染层，不干扰布局计算
::before 光标必须用 right: 0 + transform: translateY(-50%)
这是锚定光标到末尾的最小必要条件：
– position: relative 必须加在文字容器上（不是 body 或 wrapper），否则 ::before 会相对于最近的定位祖先定位，可能跑偏
– right: 0 让伪元素右边界紧贴容器右边界，不管容器 width 是多少、是否被 steps() 截断，它都“钉”在可见区域最右端
– transform: translateY(-50%) 是唯一可靠垂直居中方式；用 top: 50% + margin-top: -0.4em 会因字体 line-height 或 font-metrics 差异失效
– 不要加 width 或 height 百分比值，全部用 em 或 px 绝对单位，避免响应式缩放时光标变形
光标动画的 animation-delay 必须等于打字总时长
这是同步最关键的硬约束，不是建议：
– 打字动画若为 typing 4s steps(20, end)，说明每字耗时 0.2s，总时长就是 4s
– 光标动画必须写成 animation: blink 1s step-end infinite, animation-delay: 4s，不能是 3.9s 或 4.1s
– 如果文本由 JS 动态注入（比如从 API 获取），必须实时重算： el.style.setProperty('--delay', `${text.length * 0.2}s`)，并让 CSS 使用 animation-delay: var(--delay)
– 切忌用 infinite 直接启动光标动画——它从第 0 帧就开始闪，会导致“字还没打完，光标已狂闪 2 秒”
兼容性兜底和性能陷阱
在真实项目中这几个点最容易漏：
– 旧版 Safari（≤16.6）和部分安卓 WebView 不支持 transform 在伪元素上触发合成层，光标会掉帧。补一句 will-change: transform 可强制提升图层
– 不要在 ::before 上加 box-shadow、filter 或 backdrop-filter，它们会打断 step-end 的硬切换节奏，让光标出现拖影或淡入
– 若容器用了 text-rendering: optimizeLegibility 或启用了 OpenType 特性（如 font-feature-settings: "ss01"），字符宽度不可预测，此时应降级为基于 ch 单位的固定宽度容器 + steps(N)，而非依赖 100%
– 多行打字机必须用 JS，CSS 无解；::before 光标只适用于单行，强行撑多行会导致光标错位到第一行末尾
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
