选用 ::before 而非 border-right 是因后者受限于元素类型且无法独立控制位置、形状与层级，而 ::before 伪元素可自由定位、设宽高、加背景及 transform 微调，更适配真实光标效果。
为什么不用 border-right 而选 ::before？
因为 border-right 只能附着在块级或行内块元素上，且无法独立控制位置、形状或层级；而 ::before 是纯伪元素，可自由定位、设宽高、加背景、甚至用 transform 微调——更适合模拟真实光标（比如带轻微抖动、下划线式、或方块光标）。尤其当容器本身已有边框/阴影时，border-right 容易冲突或被覆盖。
::before 光标的最小可行写法
核心是用 content: '' 创建伪元素，再通过绝对定位贴合文字末尾。注意必须配合 position: relative 在父容器上启用定位上下文：
h1 {
position: relative;
white-space: nowrap;
overflow: hidden;
}
h1::before {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 2px;
height: 0.8em;
background: currentColor;
transform: translateY(-50%);
animation: blink 1s step-end infinite;
}
-
right: 0确保光标始终停在当前可见文本最右端 -
transform: translateY(-50%)垂直居中，避免字体基线偏移导致光标“浮高” -
step-end是关键：让光标只在帧尾切换显隐，不渐变、不拖影
如何让 ::before 光标和打字动画严格同步？
打字动画结束时间 = 文本字符数 × 单字耗时。若用 steps(12, end) + animation-duration: 2.4s，说明每字 0.2s，总时长就是 2.4s。此时光标动画的 animation-delay 必须设为 2.4s，否则会出现“字打完了光标还在闪”或“光标提前消失”。
- 延迟值必须与打字动画总时长完全一致，不能靠估算
- 如果文本动态变化（如 JS 插入），需用 JS 重算字符数并更新
style.setProperty('--delay', `${len * 0.2}s`) - 别用
infinite直接套光标动画——它会从 0 秒开始闪，必须靠animation-delay锚定启动时机
容易忽略的兼容性与渲染陷阱
::before 光标在某些旧版 Safari 或安卓 WebView 中可能因 transform 触发合成层失败，导致闪烁卡顿。稳妥做法是补全 will-change: transform，或降级为 top/bottom/left/right 定位。
- 避免在
::before上用box-shadow或filter，它们会强制重绘，打断 steps 动画节奏 - 如果父容器用了
font-variant-ligatures或连字字体（如 Fira Code），字符宽度计算可能不准，建议统一用等宽字体 +ch单位做打字宽度动画 - 移动端 iOS Safari 对
animation-delay的精度较低，超过 3s 延迟可能出现 ±0.3s 偏差，建议总时长控制在 2.5s 内
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
