Positioning text with the :after pseudo selector

Question

I have this:

    div#myImg{

        background: url('myimage.png') left top no-repeat;

    }



    div#myImg:after{

        content: 'TEXT UNDER IMAGE';

        margin:0 auto;

        vertical-align:text-bottom;

        font-size: 14px;

    }           



    .dm_lp_imgs{

        width: 100px;

        float:left;

        height: 115px;

        margin-right: 15px;

    } 





    <div id="myImg" class="lp_imgs"></div>

I know you can add text with the :after pseudo selector, but I want to position that text, centered, just below my image.
Can I do that with the :after pseudo selector?

At the moment, the text seems stuck to the top of the div#myImg DIV.

UPDATE:

display:block

Doesn't do the trick...

Answer 1

Usually I use CSS position to do that sort of thing. Make the parent position:relative, add position:absolute to the ::after element, and give it a top:100%

http://jsfiddle.net/s22Af/

div#myImg:after{
    content: 'TEXT UNDER IMAGE';
    margin:0 auto;
    vertical-align:text-bottom;
    font-size: 14px;

    position:absolute;
    top: 100%;
    text-align: center;
}           

.dm_lp_imgs{
    width: 100px;
    float:left;
    height: 115px;
    margin-right: 15px;

    position: relative;
}

Positioning text with the :after pseudo selector

Sign up