Html DIV :after - 在 DIV 后添加内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10889909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DIV :after - add content after DIV
提问by andrepcg
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 :afterto create the content:
我正在设计一个简单的网站，我有一个问题。我希望所有<div>标签class="A"的底部都有一个图像分隔符，就在<div>（参考图像，红色部分）之后。我正在使用 CSS 运算符:after来创建内容：
.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?
问题是图像分隔符没有显示在 之后<div>，而是在 CONTENT 之后<div>，在我的情况下，我有一个段落<p>。我该如何编码以便图像分隔符出现在 AFTER 之后<div class="A">，而不管 div A 的高度和内容如何？
回答by Zoltan Toth
Position your <div>absolutely at the bottom and don't forget to give div.Aa position: relative- http://jsfiddle.net/TTaMx/
将你的<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;
}?
