Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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