Edit in JSFiddle

<!--
To the extent possible under law, Kaan Genc has waived all copyright and related or neighboring rights to this content. This work is published from: United States. 

https://creativecommons.org/share-your-work/public-domain/cc0/
-->
<span contenteditable="true" data-placeholder="click on me and type"></span>
<style>
/* Add the placeholder text */
[data-placeholder]::before {
  content: attr(data-placeholder);
  /* Or whatever  */
  color: gray;
}
/* Hide the placeholder when selected, or when there is text inside */
[data-placeholder]:focus::before, [data-placeholder]:not(:empty)::before {
  content: none;
}
</style>

/* None of this CSS is required for the placeholder, it's all for the demo. */
* {
  box-sizing: border-box;
}

span {
  display: block;
  padding: 2rem;
  margin: 2rem;
  border: 1px solid black;
}