Css 使用：after伪选择器定位文本

我有这个：

    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>

---

我不知道您的要求，但是如果您是为现代浏览器/html5编写代码，您应该查看和html标记

请考虑：

标记：

---

可以相对于父元素绝对定位伪元素。将position:relative添加到div中，position:absolute添加到CSS后面的：中，然后使用常用方法定位。我在这里做了一个快速的调整：

通常我使用CSS位置来做这类事情。使父位置为：相对，将position:absolute添加到：：after元素，并给它一个top:100%

---

如果“文本”是实际内容，则不应在伪元素的content属性中使用。抱歉@AmitJoki，我刚离开办公室就发布了此消息，没有时间抛出JSFIDDLE。这是一个涉及CSS样式的问题。它与语义html5correct无关，这意味着OP可能没有提出正确的问题。不管怎么说，如果OP决定尝试这一点，并且发现这不会改变任何东西，因为这些元素的默认样式只是块级别，添加了一些边距，这对他没有帮助。这个答案与其说是一个答案，不如说是一个评论。问题是试图解决一个问题，HTML5规范的作者认为有必要为OP试图用伪元素欺骗的明确目的使用特定标签。对我来说，这似乎是一个XY问题，因此我的帖子。

display:block

<figure id="myFigure">
    <div id="myImg" class="dm_lp_imgs"></div>
    <figcaption>text under image</figcaption>
</figure>

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