Все еще пытаюсь стиль CSS оглавления

Question

В нескольких предыдущих вопросах я пытался воспроизвести следующую таблицу содержания:

Некоторые предложения были полезны, но часть "ОБЗОР..." все еще не работает: посмотрите этот JSBin или вариант в этом jsfiddle.

CSS выглядит следующим образом:

.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;}

Любая помощь будет отличной, спасибо.

Answer 1

Там очень просто исправить. Просто измените left установка для псевдоэлемента "..." 1em,

.list li:after {
    left:1em;
}

jsFiddle Demo

---

Обновить:

Возникла проблема с расположением нужного номера, когда заголовок переносится на вторую строку. Это можно исправить, добавив класс под названием "две строки".

<li style="margin:0 0 .5em 0; padding-left:.6em;" class="two-lines">
    <span>A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS</span>
    <span class="number">1</span>
</li>

.two-lines {
     text-indent:-.6em; /* This was already on the inline-style */
}

.two-lines .number {
    padding-right: 0.8em; /* This is fixing the number's location issue */
}

jsFiddle Demo