36

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?

0

4 Answers 4

64

Try float :

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

Demo http://jsfiddle.net/surN2/

6
  • Brilliant! Now, I just need to find a thin unicode right-single-chevron... The normal > is to wide for my taste.
    – CJT3
    Jul 4, 2012 at 11:29
  • You can use an image in css as background image.
    – Sowmya
    Jul 4, 2012 at 11:31
  • I am planing on using ZERO background images in this project... everything you see in the images is pure CSS.
    – CJT3
    Jul 4, 2012 at 11:32
  • Or u can even try by adding font family and font size to container ul li:after so that the right arrow appearance changes based on the font family and size
    – Sowmya
    Jul 4, 2012 at 11:35
  • I decided to use ••• instead of the >, I think that will work better, but thanks for the ideas! And this is all kinda moot considering I spaced the fact that the user can't click on li:after as if it were it's own element, so I'm gonna have to use a nested div in the li. Guess it was a good exercise though, just got excited about pseudo :before and :after! XD
    – CJT3
    Jul 4, 2012 at 11:41
6

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

2

You can use flexbox:

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

.container ul li:after {
    content: ">";
}
2
  • 1
    I don’t believe flexbox was a fully implemented standard 10 years ago, but this is probably handy if someone runs into the issue now. (Not sure I have that code anymore to test this)
    – CJT3
    May 8, 2022 at 17:01
  • This is a great solution now, although align-items: center doesn't appear to be necessary.
    – kevlarr
    Dec 8, 2022 at 2:10
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.