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.............

Answer 1

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:

  
Yummy stuff $400

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; }