list - 右揃え後の擬似

Question

CSS3 疑似 :after を li 要素で使用しようとしています。問題は、:after のコンテンツが li コンテンツの直後に続くことです。まるで :after が text-align:left; を使用しているかのようです。しかし、私の li 要素は display:block; を使用しているためです。text-align:right; を使用しないでください。on :after :after コンテンツを一番右に移動しますか? とにかくそうではありません。

.container ul li    {
    display: block;
    border-bottom: 1px solid rgb(60,60,60);
    border-top: 1px solid rgb(255,255,255);
    padding: 5px 5px 5px 30px;
    font-size: 12px;
}

.container ul li:after {
    content: ">";
    text-align: right;
}

これは問題のスクリーン ショットです。

> を一番右にしたいのですが、li の内容が変わるので、:after の内容に幅を設定できません。

text-align を使用しない場合、:after コンテンツを右揃えにするにはどうすればよいですか?

Answer 1

float を試してください：

.container ul li:after {
    content: ">";
    text-align: right;
    float:right;
}

デモhttp://jsfiddle.net/surN2/

Answer 2

ちょっと今、次positionのようにプロパティを使用できます：

.container ul li    {
    display: block;
    border-bottom: 1px solid rgb(60,60,60);
    border-top: 1px solid rgb(255,255,255);
    padding: 5px 5px 5px 30px;
    font-size: 12px;
    position:relative;
}

.container ul li:after {
    content: ">";
    position:absolute;
    left:20px;
    top:5px;
}

設計に従ってcssプロパティに変更します。

ライブデモ: http://tinkerbin.com/yXzOyDNg

leftに変更するよりも右揃えにしたい場合right

.container ul li    {
    display: block;
    border-bottom: 1px solid rgb(60,60,60);
    border-top: 1px solid rgb(255,255,255);
    padding: 5px 5px 5px 30px;
    font-size: 12px;
}

 .container ul li:after {
    content: ">";
    position:absolute;
    right:20px;
    top:5px;
}

ライブデモ: http://tinkerbin.com/rSWKxLwX

Answer 3

垂直方向の位置合わせfloat:rightに特別に使用します。line-height

.container ul li    {
    display: block;
    border-bottom: 1px solid rgb(60,60,60);
    border-top: 1px solid rgb(255,255,255);
    padding: 5px 5px 5px 30px;
    font-size: 12px;
    width: 100%;
}

.container ul li:after {
    content: ">";
    float: right;
    line-height: 12px;
}