Псевдо после выравнивания справа

Я пытаюсь использовать псевдоним CSS3: после элементов li. Проблема заключается в том, что содержимое: after сразу после содержимого li - как будто: после использования text-align: left; Но поскольку мои элементы li используют display: block; не следует использовать text-align: right; on: после переезда: после контента весь путь направо? Это все равно.

.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 меняет, я не могу установить ширину: после содержимого.

Как мне получить: после того, как содержимое выравнивается вправо, если не с выравниванием текста?

Ответы

Ответ 1

Попробуйте поплавок

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

Демо http://jsfiddle.net/surN2/

Ответ 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 согласно вашему дизайну.

Live demo: 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;
}

Live demo: http://tinkerbin.com/rSWKxLwX

Ответ 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;
}