DIV :after - add content after DIV

css, html

Solution

Position your `<div>` absolutely at the bottom and don't forget to give `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;
    }​

Problem

I'm designing a simple website and I have a question. I want after all `<div>` tags with `class="A"` to have a image separator on the bottom, right after the `<div>` (refer to image, section in red). I'm using the CSS operator `:after` to create the content: ``` .A:after { content: ""; display: block; background: url(separador.png) center center no-repeat; height: 29px; } ``` The problem is that the image separator is not displaying AFTER the `<div>`, but right after the CONTENT of the `<div>`, in my case I have a paragraph `<p>`. How do I code this so the image separator appears AFTER `<div class="A">`, regardless of the height and content of div A?

Original source