/* Styles only apply when the 'show-outlines' class is active */
.show-outlines h1, 
.show-outlines h2, 
.show-outlines h3, 
.show-outlines h4, 
.show-outlines h5 {
  position: relative;
  outline-offset: 4px;
}

.show-outlines h1::before, 
.show-outlines h2::before, 
.show-outlines h3::before, 
.show-outlines h4::before, 
.show-outlines h5::before {
  position: absolute;
  top: -28px;
  left: -6px;
  font-size: 10px;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height:24px;
  padding: 0 4px;
  color: #fff;
  z-index: 9999;
  -webkit-text-stroke: 0;
}

/* Color codes per element */
.show-outlines h1 { outline: 2px solid red; }
.show-outlines h1::before { content: "h1"; background: red; }

.show-outlines h2 { outline: 2px solid orange; }
.show-outlines h2::before { content: "h2"; background: orange; }

.show-outlines h3 { outline: 2px solid #e6b800; }
.show-outlines h3::before { content: "h3"; background: #e6b800; color: #000; }

.show-outlines h4 { outline: 2px solid green; }
.show-outlines h4::before { content: "h4"; background: green; }

.show-outlines h5 { outline: 2px solid blue; }
.show-outlines h5::before { content: "h5"; background: blue; }