核心思路是用::after伪元素创建竖线光标并配合@keyframes控制opacity闪烁动画；需设position:absolute、父容器position:relative，用left:100%或right:0定位末尾，line-height:1和font-family:monospace保障高度稳定。
用 ::after 配合 animation 模拟光标闪烁
核心思路是：在文本末尾加一个绝对定位的伪元素，设为竖线（content: "|"），再用 @keyframes 控制它的 opacity 变化。注意它不能直接作用于文字本身——::first-line 和 ::first-letter 不支持动画，::before/::after 才是唯一可行入口。
常见错误是把伪元素写成 display: inline 后还试图用 top/left 定位，结果失效；必须设为 position: absolute，且父容器得是 position: relative。
- 父元素需设置
position: relative - 伪元素用
content: "|"，别漏引号，否则不渲染 - 高度建议用
1em或100%，避免硬写像素值导致缩放时错位 - 动画时长推荐
1s，太快像抖动，太慢不像光标
animation 的关键帧必须包含 opacity 两态
只写 from { opacity: 1 } 不够，浏览器可能跳过动画。必须显式写出 to { opacity: 0 } 或用百分比写满两帧，否则在 Safari 或旧版 Chrome 中容易卡死在高亮状态。
也不建议用 visibility: hidden 替代 opacity——它不可动画，会导致闪烁不连贯。
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
- 用
0%, 100%而非from, to更稳妥，兼容性更好 - 别加
animation-timing-function: ease，光标要的是硬切换，不是缓动 - 必须加
animation-iteration-count: infinite，否则只闪一次
如何让光标“停在文字末尾”而不是飘在左边
伪元素默认从行首开始定位，所以得手动把它推到文字末端。最可靠的方式是：父元素设 display: inline-block 或 inline-flex，伪元素用 right: 0 + transform: translateX(0) 对齐；如果父元素是块级且宽度不定，right: 0 会失效，此时改用 left: 100%。
- 若文本是单行且父容器宽度固定，
right: 0最省事 - 若文本可能换行或长度动态变化，优先用
left: 100%，并确保父元素没overflow: hidden - 加
margin-left: -1px可微调，抵消竖线自身宽度带来的偏移 - 避免用
text-align: right配合left: 0，这会让光标脱离文字流
响应式下光标变粗/消失？检查 font-size 和 line-height
当页面缩放或字体变大时，| 的渲染可能被截断，尤其在移动端。这不是动画问题，而是伪元素继承了父级的 line-height，若该值过大，光标会被压扁甚至看不见。
- 给伪元素单独设
line-height: 1，和文字解耦 - 用
font-family: monospace确保|宽度稳定，避免某些字体里它过细 - 媒体查询中若改了
font-size，记得同步调整伪元素的height和top偏移 - 真机测试时特别留意 iOS Safari，它对
opacity动画有渲染延迟，可加transform: translateZ(0)强制 GPU 加速
真正麻烦的是多语言混合场景——中英文混排时，光标高度对齐依赖 font-family 的 fallback 顺序，一旦某个字用到了 fallback 字体，1em 就可能不准。这时候只能放弃纯 CSS，改用 JS 动态测量末字符位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
