Dot Leaders in Receipt Design CSS HTML

Dot leaders btw Description and Rate in HTML CSS

CSS Code
<style type="text/css"> ul li { width: 100%; } ul.leaders { max-width: 40em; padding: 0; overflow-x: hidden; list-style: none} ul.leaders li:before { float: left; width: 0; white-space: nowrap; 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>

HTML Cide
<ul class="leaders"> <li> <span>Base Fare</span> <span>$25.00</span> </li> <li> <span>Addl. PAX</span> <span>$20.00</span> </li> <li> <span>Child Seat</span> <span>$10.00</span> </li> <li> <span>Booster Seat</span> <span>$10.00</span> </li> <li> <span>Total Fare</span> <span>$65.00</span> </li> <li> <span>Discount (15%)</span> <span>$9.75</span> </li> <li> <span>Total Payable<br>(After Discount)</span> <span>$55.25</span> </li> </ul>

Taxi Website Designers.com