Как предотвратить редактирование текста CSS `: before`, когда сам` div` доступен для редактирования?

У меня есть редактируемое тело с div:

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

И стиль :before:

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

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

В Firefox я могу поместить курсор в начало текста и нажать backspace, и галочка будет удалена. Как это предотвратить?

Ответ 1

Вы устанавливаете contenteditable в родительском div, поэтому при стирании вы удаляете div.paragraph, поэтому псевдо исчезнет.

Посмотрите, что если вы установите свойство в дочернем div вместо этого, вы можете заставить его работать.

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

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

Ответ 2

Когда эта проблема воспроизводится (например,

становится

Чтобы остановить удаление div, не указывайте его родительский contenteditable. Используйте это вместо:

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

Fiddle: http://jsfiddle.net/5y00q6ya/3/

Ответ 3

Вы не редактируете контент :before.

Он просто удаляет весь элемент .paragraph, когда он становится пустым, или если вы возвращаетесь обратно, когда находитесь в начале тега.

Ответ 4

Другие ответы объясняют проблему. Если a div наследует свою способность редактирования от своего родителя, можно удалить дочерний div сам и вместе с div также до-content.

Чтобы предотвратить это, необходимо, чтобы редактируемый div не был помещен в редактируемый родитель. Это позволяет помещать каждый редактируемый div в не редактируемый родительский div для сохранения редактируемого дочернего элемента div.

В следующем примере показано это

div.node {
    margin-left: 1em;
}

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

<div contenteditable="false" class="node">
    <div contenteditable="true" class="paragraph">Major</div>
    <div contenteditable="false" class="node">
        <div contenteditable="true" class="paragraph">Minor</div>
    </div>
</div>

Ответ 5

Возможная обходная проблема. Кажется, это работает так, как вы этого хотите.

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

div.upper-div:before {
    content: "☑";
    display:inline-block;
}
.paragraph{display:inline-block;}