How to insert image after div - html

Question

Hello how can I set image after div with image that will suit to browser width. I have this
code but it doesn't work properly. I want to image looks like in this way I mean how to make this line between images.
.phone{
margin:0 auto;
background: url(images/umow1.png);
width:74px;
height:74px;
}
.phone:after{
content: url(images/kreska2.png);
position: relative;
top: 20px;
max-width:300px;
width:100%;
left: 72px;
}
.message{
margin:0 auto;
background: url(images/napisz1.png);
width:74px;
height:74px;
}
.location{
margin:0 auto;
background: url(images/odwiedz1.png);
width:74px;
height:74px;
}

Answer 1

You need to make use of z-index so you can overlap the line with your circles.
Here's my sample code, this would make it easier for you to understand the concept: http://jsfiddle.net/C2yW4/
CSS
#linear,
#circle-group {
position: absolute; /*we need a position so we can use z-index.*/
}
#linear {
top: 100px;
width: 350px;
z-index: 0; /*It means the layer is at the most bottom*/
}
#circle-group {
z-index: 1; /*This layer will be displayed upfront than the lower value*/
}
.circle {
background: #65CA22;
border-radius: 100px;
display: inline-block;
width: 100px;
height: 100px;
margin-right: 50px;
}
HTML
<div id="parent">
<div id="linear">
<hr />
</div>
<div id="circle-group">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
Make sure to apply absolute/fixed/relative position so z-index would work.