右对齐后伪

Question

我正在尝试使用CSS3伪:在li元素之后.问题是:以下内容紧跟在li内容之后 - 好像:之后使用text-align:left; 但是因为我的li元素使用display:block; 不应该使用text-align: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: ">";
    text-align: right;
}

这是问题的屏幕截图:

我希望>在右边一直都是,并且由于li的内容发生了变化,我无法在内容之后设置宽度.

我如何得到:在内容与右边对齐后,如果没有文本对齐？

Answer 1

试试浮动:

.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