Print-Style Table-of-Contents

HTML

<h1>Inhaltsverzeichnis</h1>
<ol>
    <li data-page="5"><span>Das ist ein kurzer Text</span></li>
    <li data-page="23"><span>Das ist ein sehr viel längerer Text, der einen Zeilenumbruch erzwingt. Aber dafür muss er wirklich ellenlang sein.</span></li>
    <li data-page="32"><span>Hier kommt jetzt wieder ein etwas kürzerer Text</span></li>
</ol>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font: 100%/1.5 "Neue Helvetica", sans-serif;
    padding: 1em;
}

h1 {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: .5em;
}

ol {
    list-style-type: none;
}

li {
    margin-bottom: .5em;
    padding-right: 3em;
    position: relative;
}

span { padding-right: 5px; }

li:before,
li:after {
    position: absolute;
}

li:before,
span {
    background: #fff;
}
li:after{
    content: attr(data-page);
    bottom: 0;
    right: 0;
    padding-left: 5px;
    background: #fff;
}

li:before{
    content: ' ';
    height: 18px;
    bottom: 6px;
    width: 100%;
    z-index: -1;
    border-bottom: 1px #666 dotted;
}