Hover-aware CSS debug styles.

debug.css

/* 
  Hue rotaton based on the DOM element depth.
*/
* { --hue: 0; }
* * { --hue: 60; }
* * * { --hue: 120; }
* * * * { --hue: 180; }
* * * * * { --hue: 240; }
* * * * * * { --hue: 300; }
* * * * * * * { --hue: 0; }
* * * * * * * * { --hue: 60; }
* * * * * * * * * { --hue: 120; }
* * * * * * * * * * { --hue: 180; }
* * * * * * * * * * * { --hue: 240; }
* * * * * * * * * * * * { --hue: 300; }

body :hover, body :hover > * {

  /* Outline the element */
  outline: 1px solid hsl(var(--hue), 100%, 50%);

  background: 
    
    /* content-box color */
    linear-gradient(
      hsl(var(--hue), 100%, 50%, 0.1), 
      hsl(var(--hue), 100%, 50%, 0.1)
    ),
    
    /* content-box white undercoat */
    linear-gradient(white, white),
    
    /* padding-box stripes */
    repeating-linear-gradient(
      45deg, 
      hsl(var(--hue), 100%, 50%, 0.3) 0, 
      hsl(var(--hue), 100%, 50%, 0.3) 1px, 
      transparent 1px, 
      transparent 3px
    );

  background-origin: 
    content-box, 
    content-box, 
    padding-box;

  background-repeat: no-repeat;
}

/*
  Show hovered element class
*/
body [class]:hover:before {
  content: attr(class);
  position: absolute;
  z-index: 9999;
  font-family: sans-serif;
  font-size: 0.8rem;
  padding: 0.5em;
  background: #000;
  color: hsl(var(--hue), 100%, 75%);
  transform: translate(-100%, -100%);
}