Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save juanfernandes/5506f2e1f05c14949ff7ebfbf45d76fc to your computer and use it in GitHub Desktop.
Save juanfernandes/5506f2e1f05c14949ff7ebfbf45d76fc to your computer and use it in GitHub Desktop.
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