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

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.

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

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 4

Alex's answer has one great drawback — multiline text in the .food hides bottom line.

Also there is a good old answer: http://www.search-this.com/2007/11/26/css-a-recipe-for-success/ (demo)

Here is live demo of a little modified old solution (try to resize): http://cssdesk.com/BqR96

And modified css:

.restaurant_menu__list {      
  min-width: 320px; /* For mobile devices */
  max-width: 500px; /* Custom max width for readbility */
}

.restaurant_menu__row {
  border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */
  position: relative;
  float: left;
  line-height: 1.2em;  

  margin: -.9em 0 0 0;  
  width: 100%;

  text-align: left;  
}

.restaurant_menu__meal span
, .restaurant_menu__price
{
  background-color: #FFF; /* For .restaurant_menu__row background rewriting */
}

.restaurant_menu__meal {
  padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */
}

.restaurant_menu__meal span {
  margin:0;
    position:relative;
    top: 1.6em;
    padding-right:5px; /* Custom number for space between text and dotted line */
}

.restaurant_menu__price {  
    padding:1px 0 1px 5px;
    position:relative;
    top:.4em;
    left:1px;/* ie6 rounding error*/
    float:right;
}

And modified html:

<ul class="restaurant_menu__list">

  <li class="restaurant_menu__row">
    <!-- Inside div we need inline element, to handle multiline meals -->
    <div class="restaurant_menu__meal"><span>Crab Cakes with corn, roasted red pepper, and ginger vinaigrette</span></div>
    <span class="restaurant_menu__price">€25</span>
  </li>

  <li class="restaurant_menu__row">
    <div class="restaurant_menu__meal"><span>French Onion Soup</span></div>
    <span class="restaurant_menu__price">€32</span>
  </li>

</ul>