.showgrid {
position: relative;
}
.showgrid::before {
content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; background-image: linear-gradient(to bottom, cyan 0, rgba(255, 255, 255, 0) 1px), linear-gradient(to left, cyan 0, rgba(255, 255, 255, 0) 1px); background-repeat: repeat; background-size: 1rem 1rem; z-index: -1;
}
.showgrid–blocks h1, .showgrid–blocks h2, .showgrid–blocks h3, .showgrid–blocks h4, .showgrid–blocks h5, .showgrid–blocks h6 {
background: rgba(blue, 0.1);
} .showgrid–blocks p {
background: rgba(green, 0.1);
} .showgrid–blocks ul {
background: rgba(pink, 0.1);
} .showgrid–blocks ol {
background: rgba(brown, 0.1);
} .showgrid–blocks span {
background: rgba(orange, 0.1);
} .showgrid–blocks hr {
background: rgba(red, 0.1);
}
.showgrid–blocks {
h1, h2, h3, h4, h5, h6, p, ul, ol, span, hr { position: relative; &::before { content: ''; top: 0; left: 0; right: 0; position: absolute; display: block; border-top: 1px solid rgba(blue, 0.5); } }
}