Is it possible to display the caret outside of token, when it is positioned right after its last character?

Question

I have a TokenNode, which is pretty much just a regular TextNode, but with some additional styles:

  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;
  }

When the caret is positioned after the last character of TokenNode, it is visually displayed inside the node:

I would like it to visually display outside of the node's borders, something like this (I added a space after the node to demonstrate the point):

A sandbox can be found here: https://codesandbox.io/s/how-to-move-caret-outside-of-token-h45m9m

I tried adding an empty ::after pseudo-element to the node, and I also tried applying letter-spacing to the last character, but neither of those actually moved the caret outside of the node borders.

Is this possible to achieve in a stable manner (in a way that can be flawlessly managed while updating the editor's content), preferably with pure css?