CODEWITHSUNDEEP
htmlcsscss-positionpseudo-elementcss-content
Francesco S.
Francesco S.

Reputation: 53

Positioning the :after pseudoelement

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!

Upvotes: 2

Views: 105

Answers (2)

Adrift
Adrift

Reputation: 59779

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/

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157334

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

Upvotes: 3

Related Questions