Contenteditable、deleteはcarretでcharを削除し、Chromeで:: beforeで生成されたコンテンツを削除します

Question

私はスパンインライン要素を含む可能性のあるcontenteditable要素を持っています。 これらのインライン要素には、擬似セレクタ:: beforeまたは:: afterとCSSプロパティの内容で生成されたコンテンツが含まれている場合があります。

次に、ユーザーがインライン要素の前後に配置されたcharを削除（削除またはバックスペース）しようとすると、インライン要素全体がインライン要素とともに削除されます。 インライン要素の内部にテキストが含まれている場合は、それが正常に機能します（charのみが削除されます）。

ChromeとSafariに問題があります。

誰もがこの問題を解決するソリューションを提案しています。JsとJqueryはこれを解決することができます。私はfirefoxの動作を変更したくありません。

Fiddle

​​

Answer 1

さて、これを解決する1つのハック方法は、各インライン要素に文字を挿入することです。私は幅が0の文字列​を選択したので、ユーザーはそれを見ません。