outline-prototype-label.css

* {
  position: relative;
  background: rgba(169, 169, 169, 0.1);
  box-shadow: inset 0 0 0 1px darkgrey;
}

*::before {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  left: -3px;
  left: auto;

  padding: 2px 5px;

  font-weight: bold;
  font-size: 12px;
  line-height: 12px;
  font-family: "Courier New", monotype;
  color: white;
  text-transform: uppercase;
  white-space: nowrap;

  background: darkgray;
}

body > * {
  background: rgba(255, 0, 0, 0.1);
  box-shadow: 0 0 0 4px red;
}

body > *::before {
  color: white;
  background: red;
}

body > * > * {
  background: rgba(255, 165, 0, 0.1);
  box-shadow: 0 0 0 2px orange;
}

body > * > *::before {
  color: white;
  background: orange;
}

body > * > * > * {
  background: rgba(255, 255, 0, 0.1);
  box-shadow: 0 0 0 1px yellow;
}

body > * > * > *::before {
  color: black;
  background: yellow;
}

body > * > * > * > * {
  background: rgba(0, 128, 0, 0.1);
  box-shadow: 0 0 0 1px green;
}

body > * > * > * > *::before {
  color: white;
  background: green;
}

body > * > * > * > * > * {
  background: rgba(0, 0, 255, 0.1);
  box-shadow: inset 0 0 0 1px blue;
}

body > * > * > * > * > *::before {
  color: white;
  background: blue;
}

body > * > * > * > * > * > * {
  background: rgba(148, 0, 211, 0.1);
  box-shadow: inset 0 0 0 1px darkviolet;
}

body > * > * > * > * > * > *::before {
  color: white;
  background: darkviolet;
}

/* ------------------ */
header,
main,
footer {
  box-shadow: 0 0 0 4px red;
}

header::before,
main::before,
footer::before {
  right: auto;
  left: 0;
  z-index: 1;

  font-size: 20px;
  line-height: 20px;
}

header::before {
  content: "header";
}

main::before {
  content: "main";
}

footer::before {
  content: "footer";
}

/* ------------------ */
nav,
section,
article,
aside {
  box-shadow: 0 0 0 2px orange;
}

nav::before,
section::before,
article::before,
aside::before {
  right: 0;
  left: auto;
  z-index: 1;

  font-size: 16px;
  line-height: 16px;
}

nav::before {
  content: "nav";
}

section::before {
  content: "section";
}

article::before {
  content: "article";
}

aside::before {
  content: "aside";
}

/* ------------------ */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  content: "h";
  right: auto;
  left: 0;
  z-index: 1;
}

ul::before,
ol::before {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  z-index: 1;
}

ul::before {
  content: "ul";
}

ol::before {
  content: "ol";
}

form::before {
  content: "form";
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 1;
}

p::before {
  content: "p";
  right: auto;
  left: 0;
}