HTML CSS Manual Daftar Isi

Ada yang butuh HTML dan CSS untuk bikin daftar isi? Berikut ini salah satu contohnya.

HTML

<div style="font-size: 150%; letter-spacing: .1em; margin-bottom: 10px; margin-right: -.1em; text-align: center;">
DAFTAR ISI</div>
<ul class="list" style="padding-left: 180px;">
<li style="margin: 0 0 .6em 0;">PENDAHULUAN<span class="number">ix</span></li>
<li style="margin: 0 0 .5em 0;"><span style="padding-left: .6em;">1. Latar Belakang</span><span class="number">ix</span></li>
<li style="margin: 0 0 .5em 0;"><span style="padding-left: .6em;">2. Tujuan</span><span class="number">xii</span></li>
<li style="margin: 0 0 .5em 0;"><span style="padding-left: .6em;">3. Metode</span><span class="number">xx</span></li>
<li style="margin: 0 0 .5em 0;"><span style="padding-left: .6em;">4. Hasil</span><span class="number">xxvi</span></li>
<li style="margin: 0 0 .5em 0;"><span style="padding-left: .6em;">5. Pembahasan</span><span class="number">xxx</span></li>
<li style="margin: 0 0 1.5em 0;"><span style="padding-left: .6em;">6. Diskusi</span><span class="number">xliii</span></li>
<li style="margin: 0 0 .5em 0;">DAFTAR PUSTAKA<span class="number">1</span></li>
<li style="margin: 0 0 .5em 0;">INDEKS<span class="number">297</span></li>
</ul>

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:5px;
}