Skip Navigation
Web Services
Member, Texas Tech University System The Princeton Review - 373 Best Colleges, 2011 Edition

Dot Leaders

Word Processing and Page Layout applications often make it easy to create a list in which certain items are aligned to the right and separated from the rest of the text by a dotted line. The line is called a dot leader, and there is no equivalent to it in html. We have created a style to achieve that effect, however, using ordered or unordered lists and definition lists. To use:

  • Create an <ol> or <ul> for the top-level list and assign it class="dotLeaders".
  • Each <li> represents a new line in the list.
  • Add a definition list (<dl>) within each <li> that needs to contain a dot leader pair.
  • Within each <dl>, create a <dt> for the text that will be aligned to the left, and a <dd> for the text that will be aligned to the right.
<ul class="dotLeaders">
        <li>
                <dl>
                        <dt>Fall and Spring Semester</dt>
                        <dd>$15.00</dd>
                </dl>
        </li>
        <li>
                <dl>
                        <dt>Fall or Spring Semester only</dt>
                        <dd>$7.50</dd>
                </dl>
        </li>
        <li>
                <dl>
                        <dt>Each summer term</dt>
                        <dd>$7.50</dd>
                </dl>
        </li>
</ul>
  • Fall and Spring Semester
    $15.00
  • Fall or Spring Semester only
    $7.50
  • Each summer term
    $7.50

That same code, but using an ordered list <ol> instead of an unordered list <ul>, would look like this:

<ol class="dotLeaders">
        <li>
                <dl>
                        <dt>Fall and Spring Semester</dt>
                        <dd>$15.00</dd>
                </dl>
        </li>
        <li>
                <dl>
                        <dt>Fall or Spring Semester only</dt>
                        <dd>$7.50</dd>
                </dl>
        </li>
        <li>
                <dl>
                        <dt>Each summer term</dt>
                        <dd>$7.50</dd>
                </dl>
        </li>
</ol>
  1. Fall and Spring Semester
    $15.00
  2. Fall or Spring Semester only
    $7.50
  3. Each summer term
    $7.50