title: Adding a dotted line spacer/infill with CSS
body: <p>I am working on a restaurant website.  The design calls for the typical dotted line infill between a menu item and the price.  I have been scouring the net and messing with it for an hour or so now and can't seem to find any good ways to do this with only CSS.  I found a couple of other solutions on here that work great if you have a solid color background, however on this site it uses a background image and those solutions wouldn't work.</p>
  
  <p>Example: <a href="https://stackoverflow.com/questions/7278030/menu-style-fill-in-with-periods?lq=1">Menu style &quot;....&quot; - fill in with periods</a> has a good solution, but it sets the background colors to white of the menu item and price to hide the dotted lines behind them, but the page I am building has a background image so any solid color backgrounds would look bad.</p>
  
  <p>I have tried using all kinds of combinations of table-row/table-cell or any other type of CSS display attributes and width settings on the elements, but no dice.</p>
  
  <p>Here is some fake sample markup:</p>
  
  <pre><code>&lt;ul&gt; 
      &lt;li&gt;&lt;span&gt;Soup&lt;/span&gt;&lt;span class="dots"&gt;&amp;nbsp;&lt;/span&gt;&lt;span&gt;$2.99&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;Ice cream&lt;/span&gt;&lt;span class="dots"&gt;&amp;nbsp;&lt;/span&gt;&lt;span&gt;$5.99&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;Steak&lt;/span&gt;&lt;span class="dots"&gt;&amp;nbsp;&lt;/span&gt;&lt;span&gt;$20.99&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have been trying to get this to work by using the "dots" class element with a bottom border to fill in the gap, but nothing I try works.  I also just put a bottom border on the LI element all the way across the bottom of each row, but that is not what the designer wants.  I can only think of doing it in javascript as a last resort, but wanted to see if you guys had any ideas.  Or, I can just use tables, but really wanted to avoid that as well.</p>
  
  <p>Thanks!</p>