DIV：之后 - 在DIV之后添加内容

Question

我正在设计一个简单的网站，我有一个问题。 我希望在<div> class="A"所有<div>标记后面的:after后面有一个图像分隔符（请参阅图像，红色部分）。我正在使用CSS运算符.A:after { content: ""; display: block; background: url(separador.png) center center no-repeat; height: 29px; } 来创建内容：

<div>

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

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