DIV:之后 - 在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>.我如何对此进行编码以使图像分隔符显示在AFTER之后<div class="A">,无论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;
    }?