如何在CSS中使用堆叠椭圆做一个老式的目录？

Question

以下是我正在尝试复制的目录：

这是我到目前为止所拥有的：http://jsfiddle.net/hTt6L/。你会注意到我甚至没有尝试堆叠的椭圆，因为我不知道该怎么做。

<div style="margin:25px 22px 200px 22px;">
     <div style="text-align:center;font-size:150%;letter-spacing:.1em;margin-bottom:10px;margin-right:-.1em;">CONTENTS</div>
     <div style="margin-bottom:9px;">EDITOR&rsquo;S INTRODUCTION</div>
      <div style="margin:0 0 .5em 1em;">1. Historical</div>
      <div style="margin:0 0 .5em 1em;">2. Epistemology</div>
      <div style="margin:0 0 .5em 1em;">3. Epistemology of Morals</div>
      <div style="margin:0 0 .5em 1em;">4. Psychology of Morals</div>
      <div style="margin:0 0 .5em 1em;">5. The Moral System</div>
      <div style="margin:0 0 1.5em 1em;">6. Morals and Theology</div>
     <div style="margin:0 2em .5em 1em;text-indent:-1em;">A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS</div>
     <div style="margin:0 2em .5em 1em;">INDEX</div>
 </div>

最后，这是它在上下文中的样子：http://www.dinkypage.com/185740#S2

Answer 1

这是Fiddle to see it in action。我更新了DOM以获得列表而不是常规DOM。我在文本周围添加了spans以及包含章节编号的新span，例如“xi”。

这是新的css：

.list li {
    position:relative;
    overflow:hidden;
    width:250px;
}
.list li:after {
    content:".................";
    display:block;
    letter-spacing:16px;
    position:absolute;
    left:0px;
    bottom:0px;
    z-index:-1;
    font-weight:bold;
}
.list li span {
    display:inline-block;
    background-color:#FFF;
    padding-right:5px;
}
 .list li .number {
    float:right;
    background-color:#FFF;
    font-weight:bold;
}

Answer 2

我认为Front End Guy的解决方案很好，但我采用了不同的方法，改为使用背景图像。使用content:after（就像Front End Guy一样）为你的省略号，如果你不想要一个固定的宽度，只要确保你包括足够的宽屏幕。您还应该填充这些跨度，以确保标题右侧和页码左侧等距离。

我还修改了HTML（我们都使用了列表是有原因的，你也应该这样做）。小提琴：http://jsfiddle.net/Rkkud/

CSS：

li {
  background-image: url(data:image/gif;base64,R0lGODlhCgAKAKIAAAAAAP///9fX1ycnJ+3t7QAAAAAAAAAAACH5BAAHAP8ALAAAAAAKAAoAAAMNGLrc/jDKRwYUYOqVAAA7);
  background-position: 0 90%;
  background-repeat: repeat-x;
}

li:after {    
  display: inline-block;
  float: right;
  background: white;
  padding: 0 0 0 1em;
}
li.first:after {
  content: "ix";
}
li.second:after {
  content: "xii";
  float: right;
}
.index-title {
  display: inline-block;
  background: white;
  padding: 0 1em 0 0;
}