Skip to main content

Dot Leaders in HTML/CSS


This project will teach you how to create a dot leaders using html/css. Dot leaders is used to connect items across a gap of variables. We can also used other symbols like dash, arrows etc, but what we mostly used is dots.

The tricks in doing this is we fill the full width of the page with dots and the spans(where we put the strings) are put on top. We set also the background of the span into white(which hides the dots) and overflow into hidden to ensure the dots do not extend outside the list.

Hope you learn from this.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.


Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.