CSS A4 page ruler

css.css

#page .ruler {
    position: absolute;
}

#page .ruler.horz span {
    width: 1cm;
    height: 297mm;
    display: block;
    position: absolute;
}
#page .ruler.horz span:nth-child(odd) {
    background-color: rgba(70, 0, 0, 0.2);
}
#page .ruler.horz span:nth-child(even) {
    background-color: rgba(70, 70, 0, 0.2);
}
.horz span:nth-child(1) {left: 0;}
.horz span:nth-child(2) {left: 1cm;}
.horz span:nth-child(3) {left: 2cm;}
.horz span:nth-child(4) {left: 3cm;}
.horz span:nth-child(5) {left: 4cm;}
.horz span:nth-child(6) {left: 5cm;}
.horz span:nth-child(7) {left: 6cm;}
.horz span:nth-child(8) {left: 7cm;}
.horz span:nth-child(9) {left: 8cm;}
.horz span:nth-child(10) {left: 9cm;}
.horz span:nth-child(11) {left: 10cm;}
.horz span:nth-child(12) {left: 11cm;}
.horz span:nth-child(13) {left: 12cm;}
.horz span:nth-child(14) {left: 13cm;}
.horz span:nth-child(15) {left: 14cm;}
.horz span:nth-child(16) {left: 15cm;}
.horz span:nth-child(17) {left: 16cm;}
.horz span:nth-child(18) {left: 17cm;}
.horz span:nth-child(19) {left: 18cm;}
.horz span:nth-child(20) {left: 19cm;}
.horz span:nth-child(21) {left: 20cm;}

#page .ruler.vert span {
    width: 210mm;
    height: 1cm;
    display: block;
    position: absolute;
}
#page .ruler.vert span:nth-child(odd) {
    background-color: rgba(0, 0, 70, 0.2);
}
#page .ruler.vert span:nth-child(even) {
    background-color: rgba(0, 70, 70, 0.2);
}
.vert span:nth-child(1)  {top: 0;}
.vert span:nth-child(2)  {top: 1cm;}
.vert span:nth-child(3)  {top: 2cm;}
.vert span:nth-child(4)  {top: 3cm;}
.vert span:nth-child(5)  {top: 4cm;}
.vert span:nth-child(6)  {top: 5cm;}
.vert span:nth-child(7)  {top: 6cm;}
.vert span:nth-child(8)  {top: 7cm;}
.vert span:nth-child(9)  {top: 8cm;}
.vert span:nth-child(10) {top: 9cm;}
.vert span:nth-child(11) {top: 10cm;}
.vert span:nth-child(12) {top: 11cm;}
.vert span:nth-child(13) {top: 12cm;}
.vert span:nth-child(14) {top: 13cm;}
.vert span:nth-child(15) {top: 14cm;}
.vert span:nth-child(16) {top: 15cm;}
.vert span:nth-child(17) {top: 16cm;}
.vert span:nth-child(18) {top: 17cm;}
.vert span:nth-child(19) {top: 18cm;}
.vert span:nth-child(20) {top: 19cm;}
.vert span:nth-child(21) {top: 20cm;}
.vert span:nth-child(22) {top: 21cm;}
.vert span:nth-child(23) {top: 22cm;}
.vert span:nth-child(24) {top: 23cm;}
.vert span:nth-child(25) {top: 24cm;}
.vert span:nth-child(26) {top: 25cm;}
.vert span:nth-child(27) {top: 26cm;}
.vert span:nth-child(28) {top: 27cm;}
.vert span:nth-child(29) {top: 28cm;}
.vert span:nth-child(30) {top: 29cm;}

html.html

    <div class="ruler horz">
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span>
    </div>
    <div class="ruler vert">
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
        <span></span><span></span>
    </div>