Adding a dotted line trail after menu description - css

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

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

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>

Answer 4

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?