css - DIV :after - 在 DIV 之后添加内容

Question

我正在设计一个简单的网站，我有一个问题。我希望所有<div>标签class="A"都在底部有一个图像分隔符，就在<div>（参考图像，红色部分）之后。我正在使用 CSS 运算符:after来创建内容：

.A:after {
    content: "";
    display: block;
    background: url(separador.png) center center no-repeat;
    height: 29px;
}

问题是图像分隔符没有显示在 之后<div>，而是在 的内容之后<div>，在我的情况下，我有一个段落<p>。<div class="A">无论 div A 的高度和内容如何，​​我如何对此进行编码，以便图像分隔符出现在 AFTER 之后？

Answer 1

将你的<div>绝对定位在底部，不要忘记div.A给position: relative- http://jsfiddle.net/TTaMx/

    .A {
        position: relative;
        margin: 40px 0;
        height: 40px;
        width: 200px;
        background: #eee;
    }

    .A:after {
        content: " ";
        display: block;
        background: #c00;
        height: 29px;
        width: 100%;

        position: absolute;
        bottom: -29px;
    }​