右对齐后的伪

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

您可以使用弹性盒：

.container ul li {
    display: flex; 
    justify-content: space-between;
}

.container ul li:after {
    content: ">";
}

Answer 4

使用

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