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.leadersli {
  display:        table;
}
ul.leaderslispan {
  display:        table-cell;
}
ul.leaderslispan:first-child { /* TITLE */position:       relative;
  overflow:       hidden;       /* Don't go underneath the price */
}
ul.leaderslispan: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.leaderslispan + 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 */
}

<ulclass=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>