Javascript ContentEditable, установка позиции курсора / каретки при использовании селектора :: after и :: before css

Question

У меня есть редактируемый div контента с селектором CSS. Я хочу установить курсор от второй строки или строки после приветственного текста tex t. Когда у меня есть текст в редактируемом контенте, di c работает нормально, но когда у меня нет данных, он помещает курсор на первую строку поверх текста приветствия.

Я пробовал с setStart и setEnd методов, но, во-первых, у меня нет дочерних узлов, а во-вторых, я показываю текст с помощью селекторов CSS.

Я прилагаю редактируемое изображение div содержимого для лучшего понимания.

Примечание: синий текст здесь - селекторы css (:: after, :: before) нет любого HTML элемента.

Мой текущий код:

<div contenteditable="true" id="editable-content-inner-div-id-943" spellcheck="false">
</div>

Javascript Код:

let contentEditableElement = document.querySelector(`editable-content-inner-div-id-943`)
let range = document.createRange();
range.selectNodeContents(contentEditableElement);
//range.setStart(contentEditableElement.childNodes[0], 0);
//range.setEnd(contentEditableElement.childNodes[0], 0);
range.collapse(false);
selection = window.getSelection();
 if (settoEnd) {
    selection.removeAllRanges();//remove any selections already made
   }
selection.addRange(range);

Любая помощь будет очень признательна. Спасибо.