CSS Leading Ellipsis

Question

Is there anyway to accomplish a leading ellipsis using CSS? Like in a table of contents where the title of the section is followed by ellipsis until the page number which is shown on the right of the page.

Like this:

Ellipsis to end of element.

(Outlines shown to identify different elements.)

• David Thomas: Given what mark-up? As your question stands you're asking a fairly open question ('not a real question'/'too localized')
• Josh M.: It's okay, just wondering if it is possible...markup doesn't matter much...

Answer 1

Here's a crude example with just floated elements/overflow: http://jsfiddle.net/8Ngv5/

It would be less crude if you could fix the widths of all elements.

Here is a more elegant example: http://jsfiddle.net/8Ngv5/2/

This one uses the :before pseudo-class to inject a long string which is then covered by the left element. The left element has to be positioned to sit atop the line, and it needs a background to cover the line (see CSS).

This works in IE9, Chrome, and Firefox.

Result

enter image description here

HTML

<div class="left">Hello</div>
<div class="right">World</div>
<br>
<div class="left">Another Line</div>
<div class="right">With Longer Content</div>
<br>
<div class="left">Another Line 2</div>
<div class="right">2 With Longer Content</div>

CSS

BODY {
 line-height: 1.2em; 
}
.left {
 float: left; 
 position: relative;
 top: 1.2em;
 background-color: #fff;
}
.right:before {
 content: "...............................................................................................................................................................................................................................................................................................................................................................................................................................";
}
.right {
 float: right;
 white-space: nowrap;
 text-align: right;
}

• Josh M.: Cool, :before and content are new to me, very interesting!
• Josh M.: Using your suggestion (as well as everyone else's since they're the same), I did this: jsfiddle.net/FRBxD/1 Thanks.
• Tim M.: @JoshM. - nice sample; if you have control over the element width, you can do it even more simply (like you did).
• Josh M.: In this case I wanted the 2nd "column" to all be left justified so setting a width on the first "column" is an easy way to do it.

Answer 2

You can use the :before selector and content: "...";

.some-class:before
{
 content: "...";
}

More examples

Answer 3

you could use the :before or :after selectors?