Dot leaders

Typographers call "dot leaders" the rows of dots that connect columns in a table, such as this:

• Ram 7.95
• Syam 8.95
• Chan 7.95
• Mark 5.25
• David 10.95

Dots are the most common, but you can use other symbols, such as dashes, or a solid line with an arrow. They help to visually connect items across a gap of variable size.

HTML Code for this:

<ul class=leaders>
    <li>
        <span>Ram</span>
        <span>7.95</span>
    </li>
    <li>
        <span>Syam</span>
        <span>8.95</span>
    </li>
    <li>
        <span>Chan</span>
        <span>7.95</span>
    </li>
    <li>
        <span>Mark</span>
        <span>5.25</span>
    </li>
    <li>
        <span>David</span>
        <span>10.95</span>
    </li>
</ul>

CSS Rules:

ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none}
ul.leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
    padding-right: 0.33em;
    background: white}
ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: white;}

I used an arbitrary 80 dots, which is enough to fill about 38em, hence the maximum width on the list. The ':before' is given a width of zero, so it effectively uses no space and the other content will end up on top of the dots.

The 'padding: 0' and 'list-style: none' are there only to suppress the default style for lists: I chose to mark up the menu as a list, but I didn't want bullets before the items.

One advantage of attaching the dots to the list item, instead of to one of the SPANs, is that this way all dots nicely line up vertically. That is often a desired effect if you have several adjoining lines with dot leaders.

Reference: http://www.w3.org/Style/Examples/007/leaders