CSS responsive multiline list with dashed lines (name - - - price) - html

Question

I'm trying to figure out how to make a multi-line dot leader when the background is textured or you don't know the background. The W3C site provides a good example when you know the background color, but that doesn't work for my needs. Here is a SO example of a textured background that works really well, but the leaders disappear when the line breaks to a 2nd line. Unfortunately the two use a different method to achieve this effect, so I'm not sure the best way to combine the best of both worlds here...
Here's sorta what I'm thinking. Is it possible?

Answer 1

Something from the top of my mind:
(Honestly I don't know for any other better and responsive solution):
jsBin demo (so you can resize and play with)
Place 2 span (as table-cell) inside a LI set as table
Trick the last span to width: 1%;
Add the desired dashes or dots or even a background-image to the first span's :after pseudo element
body{background:orange;} /* No other backgrounds are used */
ul.leaders {
padding: 0;
}
ul.leaders li {
display: table;
}
ul.leaders li span {
display: table-cell;
}
ul.leaders li span:first-child { /* TITLE */
position: relative;
overflow: hidden; /* Don't go underneath the price */
}
ul.leaders li span:first-child:after { /* DASHES */
content: "";
position: absolute;
bottom: 0.5em; /* Set as you want */
margin-left: 0.5em; /* Keep same for the next span's left padding */
width: 100%;
border-bottom: 1px dashed #000;
}
ul.leaders li span + span { /* PRICE */
text-align: right;
width: 1%; /* Trick it */
vertical-align: bottom; /* Keep Price text bottom-aligned */
padding-left: 0.5em;
/* white-space: nowrap; /* Uncomment if needed */
}
<ul class=leaders>
<li>
<span>Salmon Ravioli</span>
<span>7.95</span>
</li>
<li>
<span>Pan seared Ahi with avocado, soy, ginger and lime</span>
<span>8.95</span>
</li>
<li>
<span>Almond Prawn Cocktail</span>
<span>7.95</span>
</li>
<li>
<span>Bruschetta</span>
<span>45.25</span>
</li>
<li>
<span>Margherita Pizza</span>
<span>108.95</span>
</li>
</ul>