Daft Daft - 4 months ago 18
CSS Question

Positioning text with the :after pseudo selector

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

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