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 t

Answer 1

This can also be achieved without the use of the contentEditable attribute, using plain CSS.

Using the :empty pseudo-class along with the ::before pseudo-element you can add a placeholder to an empty element.

The following example provides a fallback placeholder for div elements that do not have a data-placeholder attribute defined.

Example:

div:empty::before {
  color: grey;
}
div[data-placeholder]:not([data-placeholder=""]):empty::before {
  content: attr(data-placeholder);
}
div:empty::before {
  content: 'fallback placeholder';
}