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?
The answer is
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;
}?
Source: Stackoverflow.com