Ruler CSS

HTML

<ul class="ruler"><li>10mm</li><li>20</li><li>30</li><li>40</li><li>50</li><li>60</li><li>70</li><li>80</li><li>90</li><li>100mm</li></ul>

CSS

.ruler, .ruler li {
    list-style: none;
    padding: 1mm;
    margin: 1mm;
}
.ruler li {
    
    padding-left: 1mm;
    display: inline-block;
    width: 6mm;
    /*font-size: 12px;*/
    font: 12px Helvetica, sans-serif;
    margin-right: 0em;
    text-align: center;
    position: relative;
}

.ruler li:before,
.ruler li:after {
    content: "";
    border-left: 3px solid red;
    height: 50px;
    position: absolute;
    right: 1em;
}
.ruler li:before {
    content: '';
    position: absolute;
    border-left: 3px solid red;
    height: 1em;
    top: -1em;
    right: 1em;
}
.ruler li:after {
    top: 1.5em;
}