title: Creating Dot Leaders for Restaurant Menu
body: <p>I'm trying to create a restaurant menu with dot leaders and I'm having trouble with this.</p>
  <p>The format I'm looking for is the picture posted below.</p>
  <p><a href="https://i.stack.imgur.com/O55FG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O55FG.png" alt="enter image description here" /></a></p>
  <p>Can someone please help me with this ?</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;dotted&quot;&gt;
                          &lt;ol&gt;
                            &lt;li&gt;
                                  &lt;h2&gt;Test&lt;/h2&gt;
                                  &lt;p&gt;&lt;span&gt;Test 2&lt;/span&gt;&lt;span class=&quot;price&quot;&gt;$3.50(2) - $6.50(4)&lt;/span&gt;&lt;/p&gt;
                              &lt;/li&gt;   
                          &lt;/ol&gt;
                          &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>p { margin: 0 0 -5px 0; }
  
  li { 
      width: 100&amp;#37;;
      position: relative;
      margin-bottom: 1em;
      border-bottom: 1px dotted #000; 
      list-style-type:none
  }
  
  span { 
      position: relative; 
      bottom: -1px;
      padding: 0 1px;
      background: #FFF;     
  }
  
  span.price { 
      position: absolute;
      right: 0; bottom: -6px;
  }
  </code></pre>
  <p>Thanks in advance !</p>