If I add a ::before pseudo element on a cusrtom node, the caret needs to be moved twice to the left to leave the node.
I am using such pseudo elements for a background animation which can only be acheived with pseudo elements.
The issue disappears as soon as I remove the pseudo elements.
How can I use ::before and/or ::after pseudo elements without affecting the movement of the cursor/caret ?
Edit: the issue seems to affect Firefox but not Chrome.
Since I don’t know of a reasonable way to work around this, I think your best options are either to have your own custom key handler that overrides arrow motion around the borders of such an element, or to find another way to get the effect you’re looking for here (for example by placing widgets).
Thank you very much @marijn .
I just tried using a decoration widget, but I get a similar issue, this time only when moving the caret to the right.
It does seem like firefox has issues with carets on non-editable children of contenteditable elements:
I will leave this as is for now, and will try the overriding arrow motion solution later if needed.