Почему не работает CSS код?

Question

[GennadyPHP]

Привет. Не удается сделать адекватный placeholder блоку с contenteditable=true

<div class="contenteditable" contenteditable="true" data-placeholder="Some text...."></div>

.contenteditable
{
    width: 100px;
    height: 100px;
}

.contenteditable:not(:focus):empty::after
{
     content: attr(data-placeholder);
}

Comments

[GennadyPHP]

Код изменил. Хотел нажать tab и enter, случайно опубликовал недописанный код

Answer 1

[Дмитрий]

необходимо добавить атрибут contenteditable="true"

Comments

[GennadyPHP]

первый коммент вопроса, ошибочно опубликовал) ошибка не в этом)

[Дмитрий]

GennadyPHP, а что не так работает? Пример

[GennadyPHP]

Дмитрий,

<div class="contentInner">
			<div class="contentBlock contenteditable" contenteditable="true" placeholder="начните печатать здесь" spellcheck="true">
				<span></span>
			</div>
		</div>

.contenteditable:not(:focus):empty::after
{
	content: attr(placeholder);
}

Дело в том, что абсолютно идентичный код у меня не работает, уже два дня решение найти не могу

[GennadyPHP]

GennadyPHP, ну и пробовал заменять data-placeholder на placeholder и т.п.

[Алексей Уколов]

GennadyPHP, ну так у вас не абсолютно идентичный код, а внутри дива есть спан и пробельные символы => див не пустой => правило не подходит. :empty - это только когда между открывающим и закрывающим тегом вообще ничего нет, ни одного символа.

[Дмитрий]

GennadyPHP, placeholder применяется к полям формы
Для div используйте data-attribute

[GennadyPHP]

Дмитрий, сработало и с placeholder, спасибо

[GennadyPHP]

Алексей Уколов, спасибо) долго бы я еще голову ломал