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:

    
Chinese Food
$5.99

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.