_heading-auditor.css

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  border: 1px solid;
}

h1:after, 
h2:after, 
h3:after, 
h4:after, 
h5:after, 
h6:after {
  font-weight: normal;
  text-transform: none;
  font-family: sans-serif;
  font-size: 11px;
  background-color: white;
  color: black;
  border: 1px solid;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 0 3px;
}

h1 {
  border-color: red !important;
  background-color: rgba(255, 0, 0, 0.125) !important;
}

h1:after {
  content: "h1";
}

h2 {
  border-color: green !important;
  background-color: rgba(0, 128, 0, 0.125) !important;
}

h2:after {
  content: "h2";
}

h3 {
  border-color: blue !important;
  background-color: rgba(0, 0, 255, 0.125) !important;
}

h3:after {
  content: "h3";
}

h4 {
  border-color: yellow !important;
  background-color: rgba(255, 255, 0, 0.125) !important;
}

h4:after {
  content: "h4";
}

h5 {
  border-color: purple !important;
  background-color: rgba(128, 0, 128, 0.125) !important;
}

h5:after {
  content: "h5";
}

h6 {
  border-color: orange !important;
  background-color: rgba(255, 165, 0, 0.125) !important;
}

h6:after {
  content: "h6";
}

_heading-auditor.scss

h1, h2, h3, h4, h5, h6 {
  position: relative;
  border: 1px solid;

  &:after {
    font-weight: normal;
    text-transform: none;
    font-family: sans-serif;

    font-size: 11px;
    background-color: white;
    color: black;
    border: 1px solid;
    box-shadow: 0 2px 3px rgba(black, .25);

    position: absolute;
    top: 3px; right: 3px;
    padding: 0 3px;
  }
}

$colors-list: red green blue yellow purple orange;

@each $current-color in $colors-list {
  $i: index($colors-list, $current-color);

  h#{$i} {
    border-color: $current-color !important;
    background-color: rgba($current-color, .125) !important;

    &:after {
      content: 'h#{$i}';
    }
  }
}