CODEWITHSUNDEEP
listcssalignment
CJT3
CJT3

Reputation: 2908

Pseudo after align right

I'm trying to use the CSS3 pseudo :after on li elements. The issue is that the content of :after is immediately following the li content - as if :after uses text-align:left; But since my li elements use display:block; shouldn't using text-align:right; on :after move the :after content all the way to the right? It doesn't anyway.

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

This is a screen shot of the issue:

:after not doing what I want

I want the > to be all the way at the right, and since the content of the li changes, I can't set a width on the :after content.

How would I get the :after content to align to the right, if not with text-align?

Upvotes: 37

Views: 39986

Answers (4)

Dmitry Shashurov
Dmitry Shashurov

Reputation: 1724

You can use flexbox:

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

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

Upvotes: 2

Sowmya
Sowmya

Reputation: 26979

Try float :

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

Demo http://jsfiddle.net/surN2/

Upvotes: 65

Anna Färber
Anna Färber

Reputation: 11

Use float:right and special line-height for vertical alignment.

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

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

Hey now you can used position properties as like this:

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

and change to css properties according your design.

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

If you want to right align than change left into 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

Upvotes: 6

Related Questions