html - 仍在尝试对目录进行 CSS 样式设置

Question

在之前的几个问题中，我一直在尝试复制以下目录：

一些建议很有帮助，但是“A REVIEW...”部分仍然被破坏：请参阅此 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 演示

---

更新：

当标题换行到第二行时，正确编号的位置存在问题。它可以通过添加一个名为“两行”的类来修复。

<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 演示