仍在尝试CSS样式的目录

Question

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

有些建议很有帮助，但“A REVIEW ...”部分仍然有问题：请参阅this JSBin或this 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

---

<强>更新

当标题换行到第二行时，正确号码的位置存在问题。可以通过添加一个名为“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