如何使光标在TokenNode最后字符后显示于节点外部？

我有一个TokenNode，本质是带额外样式的常规TextNode，其createDOM方法代码如下：

createDOM(config: EditorConfig): HTMLElement {
  const dom = super.createDOM(config);

  dom.style.background = "lightgrey";
  dom.style.padding = "5px 10px";
  dom.style.border = "1px solid darkgrey";
  dom.style.borderRadius = "8px";
  dom.style.margin = "0 5px";

  return dom;
}

当光标定位在TokenNode最后一个字符之后时，会显示在节点内部，我希望它能显示在节点边框外部，效果类似在节点后添加空格的样子。

我尝试过给节点添加空的::after伪元素、给最后一个字符设置letter-spacing，但都无法实现需求。请问能否以稳定的方式（编辑器内容更新时完美适配）实现该效果，最好用纯CSS？

解决方案 #

步骤1：重构样式与类名 #

先将内联样式移到CSS中，并给TokenNode的DOM元素添加类名，方便样式控制：

createDOM(config: EditorConfig): HTMLElement {
  const dom = super.createDOM(config);
  dom.classList.add('token-node');
  return dom;
}

步骤2：纯CSS实现光标外移效果 #

通过inline-block布局+伪元素预留空间，让光标能定位在节点边框外部：

.token-node {
  background: lightgrey;
  padding: 5px 10px;
  border: 1px solid darkgrey;
  border-radius: 8px;
  margin: 0 0 0 5px; /* 仅保留左侧margin */
  display: inline-block;
}

.token-node::after {
  content: "";
  display: inline-block;
  width: 5px; /* 宽度与原右侧margin一致，模拟外部空格 */
}

原理说明 #

• 将TokenNode设为inline-block，确保伪元素能作为其后续的可定位空间
• 用::after伪元素占据原右侧margin的宽度，编辑器会将光标定位到这个伪元素的位置，视觉上就像在节点边框外部
• 伪元素由CSS生成，不会被编辑器识别为内容的一部分，所以内容更新时不会出现适配问题

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