次の目次を複製しようとしています。
次のコードにかなり近づきました: 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’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」の部分は機能しません。どんな助けでも大歓迎です。
追加するために編集: ここでの難しさは、「モラルにおける主要な質問のレビュー」のインデントと行の折り返しにあります。したがって、この質問にはまだ答えがありません。