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

One work around of this problem is to wrap the content-editable inside a DIV and give to this DIv a fixed height.

That is, if you have a configuration like this :

Then the CSS can be the following :

#wrapper {
  width: 240px;
  height: 70px;
  margin: 0 20px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#wrapper div[contenteditable=true] {
  width: 100%;
  min-height: 35px; /* Not mandatory */
  padding: 8px;
}