Table of contents: leading dots

Question

What is a nice way to do leading dots in a table of contents with CSS?

Example:

Link.............Chapter 1
Link.............Chapter 2
Link.............Chapter 3

Answer 1

Here is an example: http://web-graphics.com/mtarchive/001622.php

This example is nice because it will scale with the font size.

Answer 2

taken from catchmyfame:

"How is this done? Basically field label is wrapped in a div which has a small image of a dot applied repeatedly in the x direction as a background. This alone would cause the dots to flow under the text so to nullify that effect, the text itself is then wrapped in a span where the background color is set to match the color of the background of the containing element. Here is the CSS:

.dots {

background:url('dot.gif') repeat-x bottom;

}

.field {

background-color: #FFFFFF; }

To apply this to the example form, you would just use it as:

< td>< divclass="dots">< span class="field">LastName< /span>< /div>< /td> "

image for the dot