title: Still trying to CSS style a table of contents
body: <p>In a couple of earlier questions, I've been trying to replicate the following table of contents:</p>
  
  <p><img src="https://i.imgur.com/zLoBg9m.png" alt=""></p>
  
  <p>Some suggestions have been helpful, but the "A REVIEW..." part is still broken: see <a href="http://jsbin.com/UvazAH/2" rel="nofollow noreferrer">this JSBin</a> or a variation at <a href="http://jsfiddle.net/Y5Yje/" rel="nofollow noreferrer">this jsfiddle</a>.</p>
  
  <p>The CSS is as follows:</p>
  
  <pre><code>.list li {
      position:relative;
      overflow:hidden;
      width:330px;}
  
  .list li:after {
      font-family: Times New Roman;
      font-size: 120%;
      content:"...............";
      text-indent: -1px;
      display:block;
      letter-spacing:34px;
      position:absolute;
      left:0px;
      bottom:0px;
      z-index:-1;
      font-weight:bold;}
  
  .list li span {
      display:inline;
      background-color:#FFF;
      padding-right:5px;}
  
  .list li .number {
      float:right;
      font-weight:bold;
      padding-left:8px;}
  </code></pre>
  
  <p>Any help would be great, thanks.</p>