在 Firefox 中，contenteditable 元素内的伪元素（如 ::after）会干扰光标定位，导致左右箭头导航异常；通过为伪元素添加 pointer-events: none 可有效解决该问题，确保光标行为与其他浏览器一致。
在 firefox 中，`contenteditable` 元素内的伪元素（如 `::after`）会干扰光标定位，导致左右箭头导航异常；通过为伪元素添加 `pointer-events: none` 可有效解决该问题，确保光标行为与其他浏览器一致。
当使用 contenteditable 实现类代码编辑体验（例如带反引号包裹的内联代码片段）时，若借助 ::after 伪元素动态插入字符（如自动补全的 3），Firefox 会将伪元素内容视为可参与光标导航的“逻辑字符”，从而破坏原本基于 DOM 文本节点的光标移动逻辑。例如，初始状态为 `123`|（光标在末尾），连续按两次左箭头本应停在 1|23 的位置，却可能错误地停在伪元素边界上，造成体验割裂。
根本原因在于：Firefox 对 contenteditable 中伪元素的光标处理机制更激进——它将伪元素生成的内容纳入编辑流的“视觉字符序列”，而 Chrome/Safari 则更严格地遵循 DOM 文本节点边界。因此，修复的关键不是修改编辑逻辑，而是让伪元素对输入事件完全“不可见”。
✅ 正确解法：为伪元素显式声明 pointer-events: none：
.code {
font-family: monospace;
background: rgba(0, 0, 0, 0.05);
}
.pseudo-ele::after {
content: "3";
pointer-events: none; /* ? 核心修复：禁用所有鼠标/光标交互 */
}
<div contenteditable> <span>`</span> <span class="code pseudo-ele">12</span> <span>`</span> </div>
⚠️ 注意事项：
-
pointer-events: none仅影响指针事件和光标导航，不影响伪元素的渲染、尺寸计算或 CSS 动画； - 不要尝试用
user-select: none或visibility: hidden替代——前者无法阻止光标进入，后者会隐藏内容； - 若需支持 IE（已不推荐），需额外 polyfill，因 IE 不支持
pointer-events在伪元素上生效； - 此方案兼容 Chrome、Safari、Edge 及 Firefox 60+，是当前最轻量、无 JS 依赖的跨浏览器解决方案。
总结：伪元素不应参与编辑语义。pointer-events: none 是语义清晰、性能零开销的标准解法，能精准剥离伪元素对光标逻辑的干扰，让 contenteditable 行为回归预期——光标只在真实文本节点间移动。
