.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);
        }
}

}