Adding a dotted line trail after menu description

Question

How would I go about adding a dynamic ".........." to a restaurant menu in CSS? Like in printed ones they have the whole "our food is made of blah blah blah.............$24.99."

How would you do that in CSS? Or is this even possible?

Answer 1

That's really graphics, not text, even if it's normally done as ASCII-art with dots. Thus, a repeating background image might do the trick appropriately?

Answer 2

It's possible but not well supported. You want the :after psuedo-selector and the content rule. See here: http://www.quirksmode.org/css/beforeafter.html Note that IE gets a big fat F for implementation.

You can do it in javascript. Or by creative use of the border-type 'dotted'. Or maybe a repeating background, as Brooks suggests, which would work by giving your price and descriptions spans that you apply a background color to to cover the repeating background.

Update What that might look like:

<ul class="menu">
  <li><span class="name">Yummy stuff</span> <span class="price">$400</span></li>
</ul>

With CSS like:

.menu { list-style-type:none;margin: 0 0 0; padding: 0 10px 0; }
.menu li {
  display:block;
  overflow:hidden; //contain the float
  background-image: url(dots.gif);
  background-repeat:repeat-x;
}
.menu .name { background-color:#ffffff; }
.menu .price { float:right; clear:none; background-color:#ffffff; }

Answer 3

The best solution is this:

<ul>
    <li><p class="food">Chinese Food</p><p class="price">$5.99</p></li>
</ul>

then CSS to match (untested, but tweakable to get the effect)

li {
    width: 300px;
    height: 20px;
    border-bottom: 1px dotted black;
    background-color: white;
}

.food, .price {
    height: 22px; //key: just a bit taller than the LI
    background-color: white;
}

.food {
    float: left;
}

.price {
    float: right;
}

So it basically fixes the rectangle of the LI and draws a border on the bottom, then the price and food name cover it up dynamically with their width. YMMV with browsers, but perhaps a negative margin-bottom will get the li border-bottom obscured for sure by the P elements.