如何在`div`本身可编辑的情况下防止CSS`:before`文本被编辑？

Question

我有一个可编辑的正文div:

<body contenteditable="true">
    <div class="paragraph">Text</div>
<body/>

和:before风格:

div.paragraph:before {
    content: "?";
}

在Firefox中,我可以将光标放在文本的开头,然后按退格键并删除复选标记.怎么预防？

Answer 1

您正在设置contenteditable父div中,因此在删除时,您正在删除div.paragraph,因此伪将消失.

请注意,如果您在子div中设置属性,则可以使其工作.

div.paragraph:before {
    content: "?";
}

<div>
    <div contenteditable="true" class="paragraph">Text</div>
</div>

Answer 2

当重现此问题时(例如,通过这个小提琴),开发人员工具显示div.paragraph已删除.仅保留文本节点.

在此输入图像描述

变

在此输入图像描述要阻止div被删除,请不要给它的父级contenteditable.请改用:

<body>
    <div class="paragraph" contenteditable="true">Text</div>
</body>