.note-editable p {
    border: 1px dotted blue;
}
.note-editable p::before {
    content: 'p';
    color: blue;
    position: absolute;
    left: 1px;
	font-size: 10px;
}

.note-editable div {
    border: 1px dotted orange;
}
.note-editable div::before {
    content: 'd';
    color: orange;
    position: absolute;
    left: 1px;
	font-size: 10px;
}

.note-editable blockquote {
	border: 1px dotted silver;
	border-left: 10px solid silver;
	padding-left: 10px;
}
.note-editable blockquote::before {
    content: 'q';
    color: silver;
    position: absolute;
    left: 1px;
	font-size: 10px;
}

.note-editable ul,
.note-editable ol {
    border: 1px dotted green;
}
.note-editable ul::before,
.note-editable ol::before {
    content: 'li';
    color: green;
    position: absolute;
    left: 1px;
	font-size: 10px;
}


.note-editable div > blockquote,
.note-editable div > ul,
.note-editable div > ol,
.note-editable p > ul,
.note-editable p > ol,
.note-editable blockquote > p {
	margin: 5px;
	margin-top: 10px;
}


.note-editable h1,
.note-editable h2,
.note-editable h3 {
    border: 1px dotted red;
}
.note-editable h1::before,
.note-editable h2::before,
.note-editable h3::before {
    content: 'H';
    color: red;
    position: absolute;
    left: 1px;
	font-size: 10px;
}