Add Icon between each Div
Michaelmcgurk’s 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> 
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;
}
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: "↓";
}
