Add Icon between each Div

Question

I have a very simple page on my site: http://jsfiddle.net/95sptas0/

Using only CSS, how do I add an icon between each .post div? I'd like one after each .post div except the last. I'm hoping to use this icon: http://fortawesome.github.io/Font-Awesome/icon/arrow-down/

.post {
    margin-bottom:50px;
    background:#eaeaea
}

<div class="post">
    <h1>This is a Post</h1>
</div>

<div class="post">
    <h1>This is a Post</h1>
</div>

<div class="post">
    <h1>This is a Post</h1>
</div>  

Answer 1

After including the "FontAwesome" font, the following CSS might do it:

.post::after { 
    content: "\f063";
    font-family:'FontAwesome';
}

\f063 is the code for the "down arrow" using the FontAwesome font.

In order for you to apply this to every element except your last, you can use the last-of-type selector:

.post:last-of-type::after { 
    display: none;
}

Answer 2

The font awesome icons requires to have an element with defined class. In you case this is <i class="fa fa-arrow-down"></i>. Since this is a new element you cannot use CSS to handle DOM manipulation.

If you can opt for text based unicode icons and font-based icons however, it will be possible through adjacent selector.

.post+.post::before {
    content: "↓";
}

Demo: http://jsfiddle.net/95sptas0/4/