CSSの省略記号

Question

CSSを使用して省略記号を完成させる方法はありますか？セクションのタイトルの後に、ページの右側に表示されるページ番号までの省略記号が続く目次のように。このよう

：

（。異なる要素を識別することが示さアウトライン）

Answer 1

を使用することができます：http://jsfiddle.net/8Ngv5/

あなたが解決することができればより少なく、粗だろうすべての要素の幅。ここ

は、よりエレガントな例である：http://jsfiddle.net/8Ngv5/2/

この1つは、左側要素で覆われている長い文字列を注入する: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 2

あなたは使用できますが、セレクタの後：前か？

Answer 3

あなたはここで、粗例は、単に要素/オーバーフローを浮かべてい:beforeセレクタとcontent: "...";

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

More examples