Firefox中如何让光标移动时忽略伪元素？

在Firefox浏览器里，初始光标位置如下：

123|

按下左箭头键2次后，期望光标定位到2的左侧，效果如下：

1|23

就和没有伪元素时的表现一致，但当前因为使用::after伪元素插入内容，导致光标导航不符合预期。相关代码示例如下：

CSS代码 #

.code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.05);
}

.pseudo-ele::after {
  content: "3";
}

HTML代码 #

<div contenteditable>
  <span>`</span><span class="code pseudo-ele">12</span><span>`</span>
</div>

解决思路 #

• 方案1：替换伪元素为真实DOM节点
  伪元素不属于DOM流，浏览器光标导航无法识别它的内容。直接把::after的内容改成真实DOM节点，就能让浏览器正确识别所有文本内容，光标导航恢复正常。调整后的HTML示例：

  <div contenteditable>
    <span>`</span><span class="code">12<span>3</span></span><span>`</span>
  </div>
  

• 方案2：监听键盘事件手动修正光标位置
  如果必须保留伪元素，可监听keydown事件，在用户按下左箭头时，判断光标位置是否处于伪元素相关区域，手动计算并设置正确的光标位置。示例代码：

  const editable = document.querySelector('[contenteditable]');
  editable.addEventListener('keydown', (e) => {
    if (e.key !== 'ArrowLeft') return;
    
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    const targetSpan = document.querySelector('.pseudo-ele');
    
    // 判断光标是否在伪元素所在span的右侧起始位置
    if (range.startContainer === targetSpan.nextSibling && range.startOffset === 0) {
      // 将光标定位到"12"中"2"的左侧
      range.setStart(targetSpan.firstChild, 1);
      range.setEnd(targetSpan.firstChild, 1);
      selection.removeAllRanges();
      selection.addRange(range);
      e.preventDefault();
    }
  });
  

  注意：需根据实际DOM结构调整判断逻辑，确保只在目标场景下修正光标。

• 方案3：拆分可编辑区域与伪元素
  给伪元素所在的节点标记contenteditable="false"，同时将可编辑文本单独拆分出来，保证排版与原效果一致。调整后的HTML示例：

  <div contenteditable>
    <span>`</span>
    <span class="code" contenteditable="true">12</span>
    <span class="pseudo-ele" contenteditable="false"></span>
    <span>`</span>
  </div>
  

  该方案需要同步调整CSS样式，确保整体布局不受影响。

内容的提问来源于stack exchange，提问作者kyw