Html ：在contenteditable上的伪元素和内容之后

我有一个contenteditable div。我使用CSS

：在

选择器之后向内容附加一个星号

<div contenteditable="true">Test content</div>

[contenteditable]:after {
  content: ' *';
}

测试内容
[内容编辑]：之后{
内容：“*”；
}

然而，这会带来问题。在Chrome和IE上，光标显示在错误的位置，而在Firefox上，asterix显示在下一行

---

如何附加asterix？

添加

显示：内联块和一些定位将在键入时固定carret位置


[内容可编辑]{
位置：相对位置；
显示：内联块；
边框：实心1px红色；
右边填充：20px；
}
[内容编辑]：之后{
显示：内联块；
内容：“*”；
位置：绝对位置；
右：0；
顶部：2个；
}
测试内容
当文本有多行或单行时，使用相对位置更好

div {
  display:inline-block;
}

[contenteditable]:after {
  content: ' *'; 
  display:inline-block;
  position:relative;
  top:4px;
  padding-left:4px; 
}

@kaido-yep，看到并修复了它。答案已更新，请再次查看。现在的问题是，如果你输入的太多，它会转到下一行，asterix会保持在绝对位置。是的，我会让你知道新行的问题；-）但是我认为FF

插入实际上是一个bug，但是我不知道
contenteditable
规格太高，所以我不能确定。谢谢你的回复。绝对位置有点棘手，因为asterix应该位于行的末尾，正如您所指出的，如果您键入太多，它将停留在顶部。@Mikko是的。嗯，这似乎是一个FF错误。不确定你是否可以重新考虑把asterix放在哪里。如果换上
：在
@caramba之前，问题就不会发生，是的，这就是我在新行向左走的意思。是的，我认为他需要js来实现这一目标。我尝试了一些已经设置好内部内容的黑客，但无法使某些内容正常工作。。。