Question

I’d like to display some text then a dotted line then some more text on the same line on a HTML page e.g.

Name: .......................................................... (Engineer)

I want the "Name" to be left justified against the left border and "Engineer" to be right justified against the right border and then the browser to be able to fill the gap between the two with repeating dots.

I’ve tried a good few different ways to get this to work using CSS and HTML but can’t quite get it right. I don’t want to have to specify the width (actual or percentage) of each component so that the solution is re-usable with words of different lengths e.g. the same solution would work with:

Factory Location: .................................... (Not invoice address)

Answer 1

I’d suggest that, perhaps, a ul would be one option:

<ul>
    <li><span class="definition">Name:</span><span class="defined">Engineer</span></li>
    <li><span class="definition">Factory location:</span><span class="defined">not invoice address</span></li>
</ul>

CSS:

ul li {
    border-bottom: 2px dotted #ccc;
}

span.defined {
    float: right;
}

span.defined:before {
    content: "(";
}

span.defined:after {
    content: ")";
}

JS Fiddle demo.

---

Edited to correct the CSS. And the HTML. Oops.

---

Edited in response to @Leigh’s (accurate) comment:

This isn’t doing what the OP asked for? This just gives a dotted underline (FF 3.5), not dots between the two pieces of text.

I’ve adjusted the CSS a little to hide the dotted border under the spans:

ul li {
    border-bottom: 2px dotted #ccc;
    line-height: 2em;
    text-align: right;
    clear: both;
    margin: 0.5em 0 0 0;
}

span.definition {
    float: left;
}

span.defined:before {
    content: "(";
}

span.defined:after {
    content: ")";
}

span {
    display: inline-block;
    border: 2px solid #fff;
    padding: 0;
    margin: 0 0 -2px 0;
}

Admittedly this is only tested in Chrome 8, and Firefox 3.6, Ubuntu 10.10.

Updated JS Fiddle demo.