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>
display:block
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;
}