Question

我有一个满足的div。我使用CSS :after选择器将asterix附加到内容中。

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

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

http://jsbin.com/hojemaziba/edit?html,css,output

但是，这会导致问题。在Chrome和IE上，光标显示在错误的位置，在Firefox上，星号显示在下一行。

我应该如何追加星号？

Answer 1

添加display: inline-block;和一些定位会在输入时修复carret的位置。

[contenteditable] {
  position: relative; 
  display: inline-block;
  border: solid 1px red;
  padding-right: 20px;
}

[contenteditable]:after {
  display: inline-block;
  content: '*';
  position: absolute;
  right: 0;
  top: 2px;
}

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

Answer 2

当文字有多行或单行时，使用位置相对要好得多。

div {
  display:inline-block;
}

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

http://codepen.io/bherumehta/pen/MJqEPp

：经过伪元素和内容的满足

2 个答案: