javascript - 使用 css after 时，光标不会出现在嵌套的 contenteditable 结构中的 chrome 中

Question

我正在处理一个 HTML，它的 contenteditable 值 true 包裹在 div 中，contenteditable false。 HTML 结构是:

<div contenteditable=false>
    <div contenteditable=true>
        <p>Abc</p>
        <p>Def</p>
    </div>
</div>

JSFiddle 链接:http://jsfiddle.net/mpsingh2003/gxbqujdw/1/

复制步骤: 在 Chrome 中打开

1. 在与文本“Def”一致的@之后单击
2. 现在在@ 之后单击与文本“Abc”一致的行。光标未出现。
3. 如果我现在单击文本“Abc”中@ 的左侧，则会出现光标。现在点击@的右边，光标出现在@左边的所需位置。

在 Firefox 和 Edge 中，它按预期工作，在任何行中单击 @ 右侧时，光标始终出现在左侧。如果有人可以建议任何 html 或 Css 解决方案，那就太好了，否则 javascript 或 jquery 也可以。

Answer 1

请更新 Css 以解决此问题。

您可以在 p:after. 中使用 Display 属性。

Please check this demo