Bryan Denny Bryan Denny - 4 months ago 13
CSS Question

Create leading dots in CSS

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

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>
    <div class="dots">
        <span class="field">LastName</span>
    </div>
</td>

image for the dot

Comments