Bryan Denny Bryan Denny - 8 months ago 42
CSS Question

Create leading dots in CSS

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


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


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:

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

image for the dot