A Pen by Béla Varga.

index.html

<div class="toc">
  <h3>Table of Contents</h3>
  <ul>
    <li>
      <div>
        <span></span>
        <a href="../../chapter/01/">Down the Rabbit-Hole</a>
      </div>
    </li>
    <li>
      <div>
        <span></span>
    <a href="../../chapter/02/">The Pool of Tears</a>
      </div>
    </li>
    <li>
      <div>
        <span></span>
        <a href="../../chapter/03/">A Caucus-Race and a Long Tale</a>
      </div>
    </li>
    <li>
      <div>
        <span></span>
        <a href="../../chapter/04/">The Rabbit Sends in a Little Bill</a>
      </div>
    </li>
    <li>
      <div>
        <span></span>
        <a href="../../chapter/05/">Advice from a Caterpillar</a>
      </div>
    </li>
    <li>
      <div>
        <span></span>
        <a href="../../chapter/06/">Pig and Pepper</a>
      </div>
    </li>
    <li>
      <div>
        <span></span>
        <a href="../../chapter/07/">A Mad Tea-Party</a>
      </div>
    </li>
    <li>
      <div>
        <span></span>
        <a href="../../chapter/08/">The Queen’s Croquet-Ground, and this chapter is tooooooooooooooooooo long</a>
      </div>
    </li>
    <li>
      <div>
        <span></span>
        <a href="../../chapter/09/">The Mock Turtle’s Story</a>
      </div>
    </li>
    <li>
      <div>
        <a href="../../chapter/10/">The Lobster Quadrille</a>
        <span></span>
      </div>
    </li>
    <li>
      <div>
        <span></span>
        <a href="../../chapter/11/">Who Stole the Tarts?</a>
      </div>
    </li>
    <li>
      <div>
        <span></span>
        <a href="../../chapter/12/">Alice’s Evidence</a>
      </div>
    </li>
  </ul>
</div>

  <h3>Features</h3>
  <ul>
    <li>Automatic Numbering With CSS Counters</li>
    <li>Dotted lines with CSS Content</li>
    <li>CSS Text overflow with ellipsis</li>
  </ul>

style.scss

@import "compass/css3";

$light-background-color: #E6E9ED;
$dark-background-color: #434A54;

$light-gray-color: #F5F7FA;
$medium-gray-color: #AAB2BD;
$dark-gray-color: #656D78; 

body {
  background-color: $light-background-color;
  color: $dark-gray-color;
  padding: 50px;
  font-family: Helvetica, Arial, sans-serif;
  counter-reset: chapter;           /* Set the chapter counter to 0 */
}

ul, li {
  padding: 0px;
  margin: 0px;
}

a {
  text-decoration: none;
  color: inherit;
}

.toc {
  background-color: $dark-background-color;
  border-radius: 5px;
  padding: 20px 50px 50px 30px;
  width: 500px;

  li {
    white-space: nowrap;
    list-style-position:inside;
    line-height: 30px;
    color: $medium-gray-color;
    
    div {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    a, span {
      color: $light-gray-color;
      background-color: $dark-background-color;
    }
      
    a {
      padding: 0 5px 0 0;
    }
      
    span {
      float: right;
      position: relative;
      padding: 0 0 0 5px;
    }    
          
    span:after {
      counter-increment: chapter;
      content: " " counter(chapter, upper-roman) "";
    } 
  }
      
  ul li div:before {
		color: $dark-gray-color;
		float: left;
		width: 0;
		content:
        "\00a0\00a0\00a0\00a0\00a0"
			". . . . . . . . . . . . . . . . . . . . "
			". . . . . . . . . . . . . . . . . . . . "
			". . . . . . . . . . . . . . . . . . . . "
	}
  
}

Table-of-Contents.markdown

Table of Contents

A Pen by Béla Varga on CodePen.

License.