harunpehlivan
7/13/2018 - 8:54 PM

Simple CSS Dot Leaders

Simple CSS Dot Leaders

DotLeader
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <!-- Feel free to use and modify however you like http://AlanSimpson.me -->
  <title>CSS Dot Leaders</title>
  <style>
    ul.dotleaders {
      list-style: none;
      padding: 0;
      /* This width can be whatever you like */
      width: 640px;
      /* Keeps extra dots from appearaing past last character */
      overflow-x: hidden;
    }

      ul.dotleaders li:before {
        float: left;
        /* Keeps dots on same line as text */
        width: 0;
        /* Prevents word wrap */
        white-space: nowrap;
        /* Just a lot of dots with a space in between, no specific number */
        content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
      }

      ul.dotleaders li span:first-child {
        padding-right: 0.33em;
        /* Helps to cover dots under the words */
        background-color: white;
      }

      ul.dotleaders li span + span {
        float: right;
        padding-left: 0.33em;
        /* Helps to cover dots under the price */
        background-color: white;
      }
  </style>

</head>
<body>
  <ul class="dotleaders">
    <li><span>Beef Tostada</span><span>$3.95</span></li>
    <li><span>Super Nachos</span><span>$4.98</span></li>
    <li><span>Quesadilla</span><span>$2.49</span></li>
    <li><span>Chimichanga</span><span>$5.49</span></li>
    <li><span>Everything Dinner</span><span>$12.49</span></li>
  </ul>
</body>
</html>