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