DIV: после - добавьте контент после DIV

Я проектирую простой сайт, и у меня есть вопрос. Я хочу, чтобы в конце <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?

Ответы

Ответ 1

Поместите свой <div> абсолютно снизу и не забудьте дать div.A 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;
    }