<div class="wrapper">
  <h1 contenteditable aria-label="I'm an editable empty h1!"></h1>
  <div contenteditable aria-label="And I'm an empty div"></div>
  <h2 contenteditable aria-label="Subtitle">I'm an editable h2. Try deleting me.</h2>
  <div contenteditable aria-label="Content">And I'm an editable div with some space ipsum. The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space</div>
*:after {
  box-sizing: border-box;

body {
  padding: 30px;
  background: #F3F6F8;
  line-height: 1.5;

.wrapper {
  max-width: 700px;
  margin: 0 auto;

[contenteditable] {
  margin: 5px;
  padding: 30px;
  outline: 0;
  &:empty {
    box-shadow: inset 0 0 0 1px #E9EFF3;
    background: #fff;

    &:before {
      content: attr(aria-label) ;
      color: #C8D7E1;
  &:focus {
    box-shadow: inset 0 0 0 2px #0085BE;
    background: #fff;
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.