最稳纯CSS打字光标方案是用::after伪元素模拟竖线并配合opacity动画实现闪烁，而非依赖caret-color或操作文本内容。
用 animation + ::after 模拟打字光标最稳
纯 CSS 实现打字光标闪烁，核心不是靠 JS 控制，而是用伪元素模拟光标，并用 animation 控制显隐。直接操作文本内容或依赖 contenteditable 的方案容易卡顿、失焦或兼容性差。
常见错误是给文字本身加 animation 透明度变化——这会让整个文本闪，不是“光标”在闪；还有人试图用 border-right 动画，但 border 不会随字体大小自动对齐，移动端一缩放就错位。
- 光标必须是独立的视觉元素，
::after是最轻量可控的选择 - 动画时长建议设为
1s，太快看不清，太慢像卡死（尤其 Safari 对steps(1)支持不稳定） - 必须加
font-family和line-height继承，否则光标高度/基线错乱 - 如果父容器用了
flex或grid，要确保position: relative在正确层级上，否则::after偏移
.typing-cursor::after {
content: "|";
margin-left: 2px;
animation: blink 1s infinite;
font-family: inherit;
line-height: inherit;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
为什么不用 caret-color？它根本不是“打字动画”
caret-color 只控制输入框里真实光标的颜色，不适用于静态文本，也不能触发“闪烁”行为——它只是个颜色开关，浏览器决定何时显示/隐藏，你没法干预节奏或样式（比如加粗、变宽、加背景）。
真实场景中，如果你在做“终端效果”“代码演示页”或“欢迎语逐字出现”，用户看到的是“文字+光标”整体动效，caret-color 完全不参与这个流程。
立即学习“前端免费学习笔记（深入）”；
-
caret-color只对<input>、<textarea>和contenteditable元素生效 - 即使强行套在
div上，CSS 会静默忽略，无报错也无效果 - 某些旧版 Edge 和 iOS Safari 对
caret-color支持不全，但伪元素方案兼容到 IE11+
处理多行文本时，光标怎么不掉到下一行？
当文字换行、或容器宽度变化时，::after 默认按块级行为渲染，容易撑开新行。关键在于让光标“贴着最后一行末尾”，而不是跟着整个块流走。
- 给父元素加
white-space: pre-wrap或pre-line，避免空格被压缩导致光标错位 -
::after必须设display: inline-block，并用vertical-align: baseline对齐文字基线 - 如果文字用了
line-clamp或text-overflow: ellipsis，光标会被截断，得改用 JS 动态插入（这是少数必须让步的场景）
动画卡顿？先关掉 will-change 和过度优化
部分同学为了“性能”加 will-change: opacity，结果在低配安卓机或旧版 Chrome 上反而更卡——因为强制提升图层引发频繁重绘。打字光标这种简单显隐，完全不需要 GPU 加速。
- 去掉所有
will-change，只保留基础opacity动画 - 避免同时给多个同类元素（如一屏 10 个“正在输入…”）都跑相同动画，用
animation-delay错开 0.1s - 如果页面有大量其他 CSS 动画，检查是否触发了
transform层叠，导致主线程争抢
真正难的不是写出来，是让光标在各种字体、字号、行高、缩放比、暗色模式下都稳稳停在文字末尾——那几像素的垂直对齐，调一次少一次耐心。
