How to prevent the CSS `:before` text being editable while the `div` itself is editable?

Question

I have an editable body with a div:

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

And a :before style:

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

Fiddle: http://jsfiddle.net/uy9xs5p0/

In Firefox I can put the cursor at the beginning of the text and press backspace and the check mark gets deleted. How to prevent that?

LcSalazar · Accepted Answer

You are setting the contenteditable in the parent div, therefore when erasing, you are deleting the div.paragraph, so the pseudo will be gone.

See that if you set the property in the child div instead, you can make it work.

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

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

Donate For Us