html - Is it possible to add placeholder in div tag

Question

I would like to display some text to the user when my div element is empty.

I have tried adding a placeholder attribute to my div but the text is not being displayed.

<div placeholder="Enter the text"> </div>

How can I display a message when my div element is empty?

Answer 1

There are lot of options using javascript, but if you want to do it in css.Try this:

html:

<div contentEditable=true data-text="Enter text here"></div>

css:

[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text)
}

Demo