Положение курсора в редактируемом элементе div с псевдоэлементом: before

Question

У меня есть редактируемый div с :before и :after css псевдоэлементами.

:before устанавливает приглашение в div
:after действует как заполнитель

Когда пользователь нажимает на пустой элемент div, курсор помещается перед содержимым «приглашения».
Как только пользователь начинает вводить содержимое :after, исчезает и курсор находится в правильном месте.

Есть ли способ поместить курсор после содержимого, когда выбран пустой div? Что интересно, если в div есть какой-либо текст, и вы выбираете div, курсор идет до конца (как я хочу).

Любые мысли / помощь будут наиболее ценными.

div[data-prompt][contenteditable=true]:before {
  content: attr(data-prompt);
  font-family: 'Open Sans', sans-serif;
  color: black;
}

div[data-placeholder]:empty:after {
  content: attr(data-placeholder);
  color: black;
}

<div contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>

Положение курсора, когда выбран пустой div

Также обратите внимание, что «prompt» не всегда будет одинаковой длины.

Answer 1

Вы можете рассмотреть текстовый отступ и некоторый перевод для управления положением курсора. Применяйте это только когда div равен :empty

div[data-prompt][contenteditable=true]:before {
  content: attr(data-prompt);
  font-family: 'Open Sans', sans-serif;
  color: black;
}

div[data-placeholder]:empty:after {
  content: attr(data-placeholder);
  color: black;
  /* added */
  display: inline-block;
  transform: translateX(-28px);
  text-indent: 0;
  /**/
}

/* added */
div[data-placeholder]:empty {
  text-indent: 38px;
}
div[data-prompt][contenteditable=true]:empty:before {
  display: inline-block;
  transform: translateX(-37px);
  text-indent: 0;
}
/**/

div[data-prompt][contenteditable=true] {
  border: 1px solid;
}

<div contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>

Для более общего c способа, на который можно положиться CSS переменные:

div[data-prompt][contenteditable=true]:before {
  content: attr(data-prompt);
  font-family: 'Open Sans', sans-serif;
  color: black;
}

div[data-placeholder]:empty:after {
  content: attr(data-placeholder);
  color: black;
  /* added */
  display: inline-block;
  transform: translateX(calc(10px - var(--d)));
  text-indent: 0;
  /**/
}

/* added */
div[data-placeholder]:empty {
  text-indent: var(--d);
}
div[data-prompt][contenteditable=true]:empty:before {
  display: inline-block;
  transform: translateX(calc(1px - var(--d)));
  text-indent: 0;
}
/**/

div[data-prompt][contenteditable=true] {
  border: 1px solid;
}

<div style="--d:37px;" contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>


<div style="--d:64px;" contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will not " data-placeholder="..."></div>