Positioning the :after pseudoelement

Question

I'm doing some experiments with the css pseudoelements. I understand that one of their advantages is the ability to insert some visual stuff in the page without affecting its semantics. What I'm trying to do right now is quite simple: insert a special character (the "ivy leaf") at the end of each article in the page. So I have an empty article, with a preset min-height, and the special character in the :before pseudoelement:

article {
    min-height: 100px;
    border: 1px solid black;
    border-radius: 5px;
    margin-top: 10px;
    padding: 20px 2px 20px 2px;
}
article:after {
    display: block;
    content:"\2766";
    font-size: 150%;
}

So I thought that the special character would be displayed right at the end of the article space, but that's not the case. It follows the normal flow of the article content, as you can see in this fiddle: http://jsfiddle.net/fscali/2XFKL/1/

For the sake of my experiment, how can I force the ivy leaf to appear at the bottom, without using any unnecessary markup?

Thanks!

score 3 · Accepted Answer · answered Dec 30 '13 at 16:13

You can use CSS positioning to position the leaf at the bottom by using position: relative; on article tag and positioning :after pseudo using position: absolute; along with left and bottom properties...

You can use right instead of left if you want to position the leaf to the right, or say, you can use top as well, but make sure you use position: relative; for the article else your leaf will fly out in the wild ...

Demo

article {
    min-height: 100px;
    border: 1px solid black;
    border-radius: 5px;
    margin-top: 10px;
    padding: 20px 2px 20px 2px; /* You can write this as padding: 20px 2px; */
    position: relative;
}
article:after {
    display: block; /* You won't need this as we are using position: absolute; */
    content:"\2766";
    font-size: 150%;
    position: absolute;
    bottom: 5px; /* Left some breathing space, you can use 0 too */
    left: 5px;
}

That's exactly what I was missing. I had already tried to use absolute positioning for the pseudoelement, but without the relative positioning for the article. THX! — Francesco S., Dec 30 '13 at 16:31
@FrancescoS. You welcome, still confused with positioning, than you can read [this](http://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on-each-other-instead-of/20718728#20718728) — Mr. Alien, Dec 30 '13 at 16:33

score 2 · Answer 2 · answered Dec 30 '13 at 16:13

article {
    min-height: 100px;
    border: 1px solid black;
    border-radius: 5px;
    margin-top: 10px;
    padding: 20px 2px 20px 2px;
    position: relative; /* Added */
}

article:after {
    display: block;
    content:"\2766";
    font-size: 150%;
    position: absolute; /* Added */
    bottom: 0; /* Change to your needs */
}

http://jsfiddle.net/2XFKL/4/

Positioning the :after pseudoelement

2 Answers2