Diagnostic-CSS-files/structure-outliner-lite.css at main · lloydi/Diagnostic-CSS-files · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
html:hover *:before {position: absolute;top: -16px;left: -1px;text-transform: uppercase;padding:2px;font-size: 10px!important;font-weight:normal;display:block;z-index:1000;}

/* HEADINGS ============================================ */
h1,h2,h3,h4,h5,h6,*[role=heading][aria-level] {position: relative;}
html:hover h1,html:hover h2,html:hover h3,html:hover h4,html:hover h5,html:hover h6,html:hover *[role=heading][aria-level] {outline:1px dotted green;}
html:hover h1:before,
html:hover h2:before,
html:hover h3:before,
html:hover h4:before,
html:hover h5:before,
html:hover h6:before,
html:hover *[role=heading][aria-level]:before {background:green;color:white;}
html:hover h1:before {content:"h1";}
html:hover h2:before {content:"h2";}
html:hover h3:before {content:"h3";}
html:hover h4:before {content:"h4";}
html:hover h5:before {content:"h5";}
html:hover h6:before {content:"h6";}
html:hover *[role=heading][aria-level]:before {content:"ARIA HEADING " attr(aria-level);}

/* LISTS ============================================ */
ul,ol {position: relative;}
html:hover ul,html:hover ol {outline:1px dotted orange;}
ul li, ol li {position: relative;}
html:hover ul li, html:hover ol li {outline:1px dashed orange;}
html:hover ul:before,
html:hover ol:before,
html:hover li:before {background:orange;color:black;}
html:hover ul:before {content:"ul";}
html:hover ol:before {content:"ol";}
/*li:before {content:"li";}*/

dl{outline:1px dotted orange;position: relative;}
html:hover dl{outline:1px dotted orange;position: relative;}
dl dt, dl dd {position: relative;}
html:hover dl dt, html:hover dl dd {outline:1px dashed orange;}
html:hover dl:before,
html:hover dt:before,
html:hover dd:before {background:orange;color:black;}
html:hover dl:before {content:"dl";}
html:hover dt:before {content:"dt";}
html:hover dd:before {content:"dd";}

/* LANDMARKS ============================================ */
article, aside, footer, form, header, main, nav, section {outline-offset:-2px;position: relative;}
html:hover article, html:hover aside, html:hover footer, html:hover form, html:hover header, html:hover main, html:hover nav, html:hover section {outline:2px dashed red;}
html:hover article:before,
html:hover aside:before,
html:hover footer:before,
html:hover form:before,
html:hover header:before,
html:hover main:before,
html:hover nav:before,
html:hover section:before {content:"Landmark";color:white;background:darkred;}

/* TABLES ============================================ */
table, table th, table td {outline-offset:-2px;position: relative;}
html:hover table, html:hover table th, html:hover table td {outline:1px dotted brown;}
html:hover table:before,
html:hover th:before {background:brown;color:white;}
html:hover table:before {content:"Table";}
html:hover th:before {content:"th";}