k-isabelle
5/31/2018 - 4:29 PM

Dot Leaders CSS2 - Source: http://www.w3.org/Style/Examples/007/leaders.en.html

<style>
  ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none
  }
  ul.leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content:
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
  }
  ul.leaders span:first-child {
    padding-right: 0.33em;
    background: white
  }
  ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: white
  }
</style>

<ul class="leaders">
  <li>
    <span>Salmon Ravioli</span>
    <span>7.95</span>
  </li>
  <li>
    <span>Fried Calamari</span>
    <span>8.95</span>
  </li>
  <li>
    <span>Almond Prawn Cocktail</span>
    <span>7.95</span>
  </li>
  <li>
    <span>Bruschetta</span>
    <span>5.25</span>
  </li>
  <li>
    <span>Margherita Pizza</span>
    <span>10.95</span>
  </li>
</ul>