list - 右对齐后的伪

Question

我正在尝试在 li 元素上使用 CSS3 伪 :after 。问题是 :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 内容上设置宽度。

如果不使用文本对齐，我将如何让 :after 内容向右对齐？

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

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