Firefox sets wrong caret position contentEditable with :before

Question

playground

This is a simplified version of my problem.
seems like I cannot put a positioned pseudo element inside a contentEditable and yet have the caret posi

Answer 1

For me this was only a problem when the box was empty. So I seeded it with a
:

  $("[contenteditable='true']").on('focus', function(){
    var $this = $(this);
    $this.html( $this.html() + '
' );  // firefox hack
  });

  $("[contenteditable='true']").on('blur', function(){
    var $this = $(this);
    $this.text( $this.text().replace('<.*?>', '') );
  });

More info here: https://bugzilla.mozilla.org/show_bug.cgi?id=550434