Show Page Structure by LeaVerou

/* ==UserStyle==
@name           Show Page Structure
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A learning tool that exposes how pages are made. Highlights block elements in red and inline elements with a faint gray outline.
@author         Lea Verou
==/UserStyle== */


@-moz-document regexp(".*") {
	
/* Non-replaced inline elements */
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, kbd, label, mark, 
output, samp, small, span, strong,  sub, sup, time, tt, var {
	outline: 1px dashed hsl(220 10% 50% / 50%) !important;
	
	/* Block & replaced elements */
	:not(&) {
		outline: 1px dashed color-mix(in oklab, color(display-p3 1 0 0) 90%, canvastext) !important;
	}
}
	
}