Dotted border from left to right (between two elements)

Question

I have no idea how to do this one.

What I want to do is print dots between Uncategorized and 82,359, or at least the illusion, i guess i have to do something with a dotted border

<ul class="list">
    <li>
    <a href="#">
        <span class="count">82,359</span>
        Uncategorized
    </a>
    </li>
</ul>

The CSS

.list a {
display: block;
padding: 6px 10px;
}

.list .count {
font-weight: normal;
float: right;
color: #6b7a8c;
}

What I want is this:

What I've tried, and the only way i can think of is <div style="border-bottom: 1px dotted #CCC;"></div> between .count and Uncategorized, but that add the border on top of the two

Answer 1

Based on the example used here: Dot Leaders as referenced by Black Hat Samurai, slight change to the markup and the CSS from the link helped it.

Added comments to explain how the code works.

ul.list {
  max-width: 220px; /* Set the width for the whole list */
  list-style: none;
  padding: 0;
}
ul.list li:before {
  float: left; /* Let the before pseudo element start from the leftmost position of each list item */ 
  width: 0;
  white-space: nowrap; 
  content: ".....................................................";
  color: #ccc;
  font-weight: bold;
}
ul.list span:first-child {
  background: white; 
  padding-right: 0.2em;
}
ul.list span + span {
  float: right; /* Align the count to the rightmost position of the list */
  background: white;
  padding-left: 0.2em;
}

<ul class="list">
  <li>
    <a href="#">

      <span class="title">Uncategorized</span>
      <span class="count">82,359</span>

    </a>
  </li>
</ul>

Answer 2

I'd go with something like this

.list {
  min-width:15em;
}
.first {
  float:left;
  margin-right:0.5em;
  color:#2B91AF
}
.price {
  float:right;
  margin-left:0.5em;
  width:4em;
  text-align: right;
}
.list:after {
  content:'';
   border-bottom:dotted 2px tomato;
  display:block;
  overflow:hidden;
  height:0.8em;
}

<p class="list">
  <i class='first'>Co-Pay:</i>
  <i class="price">$150.00</i> 
</p>
<p class="list">
  <i class='first'>Pay:</i>
  <i class="price"> $5.00</i> 
</p>
<p class="list">
  <i class='first'>Co-Pay: item</i>
  <i class="price"> $15.00</i> 
</p>
<p class="list">
  <i class='first'>Co-Pay: great deal</i>
  <i class="price"> $1.00</i> 
</p>