How to create vertical ruler in CSS/html?

Question

i want to create a vertical ruler in css and html. maybe this picture display my purpose.how create this vertical ruler?

my code is :

<div>
 <li class='ruler'>0</li>
 <li class='ruler'>5</li>
 <li class='ruler'>10</li>
 <li class='ruler'>15</li>
 <li class='ruler'>20</li>
 </div>

.ruler {
 background: #ffffff;
 box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
 border-radius: 2px;
 border-left: 6px solid #000;
 border-bottom: 1px solid #CCCCCC;
 color: #000000;
 margin: 0;
 height: 80px;
 list-style: none;
 text-align: right;
 width: 60px;
 } 

Answer 1

This is how I'd (probably) try to implement this idea:

 ol, li { /* removing the default list counters/markers: */ list-style-type: none; } ol { /* resetting the counter so every <ol> has an independent count: */ counter-reset: marker; } li { /* 'real world' measurements are perhaps not entirely faithful on screen: */ height: 1cm; border-top: 1px solid #000; /* including the border in the height of the element: */ box-sizing: border-box; width: 2.5em; /* incrementing the counter: */ counter-increment: marker; /* to position the counter relative to the <li>: */ position: relative; border-left: 2px solid #000; } li:first-child, li:nth-child(5n) { /* longer mark for the first and every fifth marker: */ width: 5em; } /* preventing a 'tail' on the <ol> from the height of the last <li> (the counter is displayed at the top, not the bottom): */ li:last-child { height: 0; } li:first-child::after, li:nth-child(5n)::after { /* positioning the pseudo-element that contains the counter: */ position: absolute; /* vertically-centering it alongside the top border: */ top: -0.5em; /* moving it the full width of the element, outside of the right side of the element: */ left: 100%; height: 1em; line-height: 1em; width: 2em; text-align: center; /* specifying the counter to use: */ content: counter(marker); } 

 <ol id="rule"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> 

References:

• box-sizing .
• CSS Generated Content, automatic numbering and lists

Answer 2

 #number1 { position: absolute; left: 70px; top: 15px; } #number2 { position: absolute; left: 50px; top: 65px; } #number3 { position: absolute; left: 70px; top: 123px; } #number4 { position: absolute; left: 50px; top: 179px; } 

 <div id="ruller"> <table cellpadding=0 cellspacing=0 height=609 width=86 style="font-size:0px;height:609;width:86"> <tr> <td> <table cellpadding=0 cellspacing=0 height=609 width=50 style="font-size:0px;height:609px;width:50px"> <tr height=0> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> </tr> <tr height=11> <td colspan=50 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=14 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=3 bgcolor="#000000" /> <td colspan=33 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=3> <td colspan=13 rowspan=24 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=5 bgcolor="#000000" /> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=33 bgcolor="#000000" /> <td colspan=4 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=50> <td colspan=5 bgcolor="#000000" /> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=16 bgcolor="#000000" /> <td colspan=21 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=58> <td colspan=5 rowspan=3 bgcolor="#000000" /> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=28 bgcolor="#000000" /> <td colspan=3 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=56> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=24 bgcolor="#000000" /> <td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=71> <td colspan=5 rowspan=3 bgcolor="#000000" /> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=30 bgcolor="#000000" /> </tr> <tr height=62> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=23 bgcolor="#000000" /> <td colspan=14 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=80> <td colspan=5 rowspan=12 bgcolor="#000000" /> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=31 bgcolor="#000000" /> </tr> <tr height=59> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=4 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=12 bgcolor="#000000" /> <td colspan=16 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=59> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=30 bgcolor="#000000" /> </tr> <tr height=41> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=6 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=4 bgcolor="#000000" /> <td colspan=22 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=4 bgcolor="#000000" /> <td colspan=26 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=34> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=30 bgcolor="#000000" /> </tr> <tr height=5> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=14 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> <td colspan=3 bgcolor="#000000" /> <td colspan=33 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=6> <td colspan=50 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> </table> </td> <td> <table cellpadding=0 cellspacing=0 height=609 width=36 style="font-size:0px;height:609px;width:36px"> <tr height=0> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> <td width=1 /> </tr> <tr height=254> <td colspan=36 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=4 bgcolor="#000000" /> <td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=143> <td colspan=36 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=14 bgcolor="#000000" /> <td colspan=22 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=119> <td colspan=36 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td bgcolor="#000000" /> <td colspan=35 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=77> <td colspan=36 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=1> <td colspan=15 bgcolor="#000000" /> <td colspan=21 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> <tr height=12> <td colspan=36 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /> </tr> </table> </td> </tr> </table> </div> <div id="number1">0</div> <div id="number2">5</div> <div id="number3">10</div> <div id="number4">15</div>