在 Firefox 中，contenteditable 元素内的伪元素（如 ::after）会干扰光标定位，导致方向键导航异常；通过为伪元素添加 pointer-events: none 可使其脱离交互响应，从而恢复符合预期的光标行为。
在 firefox 中，`contenteditable` 元素内的伪元素（如 `::after`）会干扰光标定位，导致方向键导航异常；通过为伪元素添加 `pointer-events: none` 可使其脱离交互响应，从而恢复符合预期的光标行为。
当使用 contenteditable 实现类代码编辑体验时，若通过 ::after 伪元素动态插入内容（例如自动补全符号、装饰性字符），Firefox 会将伪元素视为可参与光标导航的“逻辑节点”，造成光标在移动过程中意外停驻或跳转——例如从 123| 向左按两次方向键，本应停在 1|23，却可能错误地停在伪元素边界，破坏编辑连贯性。
根本原因在于：Firefox 的编辑引擎将伪元素纳入 DOM 编辑流的光标位置计算，而其他浏览器（Chrome/Safari）则默认忽略伪元素的编辑语义。这不是 CSS 渲染问题，而是浏览器对 contenteditable 与伪元素交互的实现差异。
✅ 正确解决方案是显式声明伪元素不参与指针事件与编辑交互：
.pseudo-ele::after {
content: "3";
pointer-events: none; /* 关键：禁用所有鼠标/焦点相关交互 */
}
⚠️ 注意事项：
-
pointer-events: none不影响伪元素的视觉渲染，仅移除其对光标定位、点击、焦点捕获等交互行为的参与； - 该属性需作用于伪元素本身（即
::before或::after），而非其宿主元素； - 不要尝试用
user-select: none或tabindex="-1"替代——前者仅控制文本选择，后者对伪元素无效； - 若需兼容旧版 Firefox（keydown 事件手动修正光标位置（但现代项目中已极少需要）。
最终 HTML 结构保持简洁，无需修改 DOM 层级：
<div contenteditable> <span>`</span> <span class="code pseudo-ele">12</span> <span>`</span> </div>
搭配上述 CSS 后，在 Firefox 中方向键导航将完全对齐 Chrome/Safari 行为：光标始终沿真实文本节点移动，无视伪元素的存在，真正实现跨浏览器一致的编辑体验。
