title: How to create vertical ruler in CSS/html?
body: <p>i want to create a vertical ruler in css and html. maybe this picture display my purpose.how create this vertical ruler?</p>
  
  <p>my code is : </p>
  
  <pre><code>&lt;div&gt;
   &lt;li class='ruler'&gt;0&lt;/li&gt;
   &lt;li class='ruler'&gt;5&lt;/li&gt;
   &lt;li class='ruler'&gt;10&lt;/li&gt;
   &lt;li class='ruler'&gt;15&lt;/li&gt;
   &lt;li class='ruler'&gt;20&lt;/li&gt;
   &lt;/div&gt;
  
  .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;
   } 
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/qo72n.png" alt="enter image description here"></p>