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.