5

次の目次を複製しようとしています。

次のコードにかなり近づきました: http://jsfiddle.net/33Kgn/2/

.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-block;
    background-color:#FFF;
    padding-right:5px;
}

.list li .number {
    float:right;
    font-weight:bold;
    padding-left:5px;
}

<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>
  <ul class="list" style="padding-left:180px;">
   <li style="margin:0 0 .6em 0;"><span>EDITOR&rsquo;S INTRODUCTION</span><span class="number">ix</span></li>
   <li style="margin:0 0 .5em 0;"><span style="padding-left:.6em;">1. Historical</span><span class="number">ix</span></li>
    <li style="margin:0 0 .5em 0;"><span style="padding-left:.6em;">2. Epistemology</span><span class="number">xii</span></li>
   <li style="margin:0 0 .5em 0;"><span style="padding-left:.6em;">3. Epistemology of Morals</span><span class="number">xx</span></li>
   <li style="margin:0 0 .5em 0;"><span style="padding-left:.6em;">4. Psychology of Morals</span><span class="number">xxvi</span></li>
   <li style="margin:0 0 .5em 0;"><span style="padding-left:.6em;">5. The Moral System</span><span class="number">xxx</span></li>
   <li style="margin:0 0 1.5em 0;"><span style="padding-left:.6em;">6. Morals and Theology</span><span class="number">xliii</span></li>
   <li style="margin:0 0 .5em 0;"><span>A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS</span><span class="number">1</span></li>
   <li style="margin:0 0 .5em 0;"><span>INDEX</span><span class="number">297</span></li>
  </div>
 </div>

しかし、リンクをたどるとわかるように、「A REVIEW...」と「INDEX」の部分は機能しません。どんな助けでも大歓迎です。

追加するために編集: ここでの難しさは、「モラルにおける主要な質問のレビュー」のインデントと行の折り返しにあります。したがって、この質問にはまだ答えがありません。

4

1 に答える 1