CSS领先省略号

Question

无论如何使用CSS完成一个领先的省略号？就像在一个目录中，该部分的标题后面是省略号，直到页面右侧显示的页码。

像这样：

（显示的轮廓用于标识不同的元素。）

Answer 1

您可以使用:before选择器和content: "...";

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

More examples

Answer 2

这是一个粗略的例子，只有浮动的元素/溢出：http://jsfiddle.net/8Ngv5/

如果你能确定所有元素的宽度，那就不那么粗糙了。

这是一个更优雅的例子：http://jsfiddle.net/8Ngv5/2/

这个使用:before伪类来注入一个长字符串，然后由左边元素覆盖。左边的元素必须定位在线的顶部，并且需要背景来覆盖线（参见CSS）。

适用于IE9，Chrome和Firefox。

<强>结果

<强> 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;
}

Answer 3

你可以使用：before或：after selectors？