CSS Responsive Multiline List With Dashed Lines (name - - - Price)

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 th

Solution 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>