〜20pxでコンテナの外側に要素を配置するにはどうすればよいですか？

Question

（jsFiddle example）

私は右に揃え、その<li> sの<ul>を持っています。要素の約20ピクセルだけが<ul>の右側に表示されるように配置し、ホバリングして通常の位置に移動するようにしたいと思います。これはコンテナのoverflow: hidden;と組み合わされるので、要素が部分的に隠され、横からスライドインされます（CSS3トランジション）。

jsFiddle example（図の場合はoverflow: visible）要素を適切な位置にスライドさせることはできましたが、コンテナの内側に20pxの位置にあるように配置するにはどうすればよいですか？私ができる最良の方法は、それらを正しい向きに保ち、それらを容器の外に押し出すことでした。

要素の幅を変更して演奏しましたが、複数の単語が含まれているとテキストが折り返して高さが変化します（幅が小さすぎるとoverflow: hiddenが消えます）。

必要に応じて固定幅の<li>を使用することは可能ですが（面白くなく、あまり好ましくありませんが）、私は他の解決策を見たいと思います。

Answer 1

UL自体の幅が固定されている場合は、ULの左側からLI（{UL_width} - 20）ピクセルを配置できます。私はおそらくそれらの線に沿って

ul { width: 200px; } 
ul li { 
    position: relative; 
    height: 15px; 
    overflow: hidden; 
} 
ul li span { 
    position: absolute; 
    top: 0; 
    left: 180px; 
} 

何かがトリックを行う必要があります...

<ul> 
    <li><span>Item #1</span></li> 
    <li><span>Item #2</span></li> 
</ul> 
... 

次のCSSはあなたに望ましい効果を与える必要があります...のような何かをするだろう。次に、ロールオーバーを実行してul li spanの左プロパティを調整します。

NEW CSS

ul { width: 200px; } 
ul li { 
    width: 200px; 
    text-indent: 180px; 
    height: 15px; 
    overflow: hidden; 
}