Still trying to CSS style a table of contents

Question

In a couple of earlier questions, I've been trying to replicate the following table of contents:

Some suggestions have been helpful, but the "A REVIEW..." part is still broken: see this JSBin or a variation at this jsfiddle.

The CSS is as follows:

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

Any help would be great, thanks.

Answer 1

There's a very simple fix. Just change the left setting for the "..." pseudo element to 1em.

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

jsFiddle Demo

---

Update:

There was an issue with the location of the right number when the title is wrapped to a second line. It can be fixed by adding a class called "two-lines".

<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