Tag HTML elements with their class names and IDs to visualize page structure
*[class], | |
*[id] { | |
position: relative; | |
outline: 2px dashed red; | |
&::before, | |
&::after { | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 1; | |
padding: 0.25em; | |
background-color: red; | |
color: #fff; | |
font-weight: normal; | |
font-family: sans-serif; | |
font-size: .9rem; | |
border: 1px solid #fff; | |
} | |
&[class]::before { | |
content: "." attr(class); | |
} | |
&[id]::after { | |
content: "#" attr(id); | |
right: 0; | |
left: auto; | |
background-color: blue; | |
} | |
&[id] { | |
outline-color: blue; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment