Needed to see if I had lined some stuff up correctly on a website I’m making. Came up with this simple CSS to add two guides to the page that I can move around freely in the browser developer console (just nudge their position around to where I need them).
It’s really simple, but for some reason didn’t think of it until now…
html::after {
content: "";
height: 1px;
width: 100%;
background: red;
position: fixed;
left: 0;
bottom: 5px; /* Change this to move the guide horizontally */
}
html::before {
content: "";
height: 100%;
width: 1px;
background: red;
position: fixed;
top: 0;
right: 5px; /* Change this to move the guide vertically */
}
content: "";
height: 1px;
width: 100%;
background: red;
position: fixed;
left: 0;
bottom: 5px; /* Change this to move the guide horizontally */
}
html::before {
content: "";
height: 100%;
width: 1px;
background: red;
position: fixed;
top: 0;
right: 5px; /* Change this to move the guide vertically */
}