Struggling to clear the content of the ::after pseudo-element from the final <span> item. I've successfully removed it from the others, but this one seems to be giving me trouble.
HTML:
<section class="comments">
<h3>Comments:</h3>
<div class="radius panel">
<div class="comment-meta">
<div class="row">
<div class="large-3 columns">
<img src="http://placehold.it/250x150">
</div>
<div class="large-9 columns">
<span>User 1</span> <span>Date: 19/10/2014</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ullam veritatis cupiditate soluta qui, numquam laudantium fugit! Cum reiciendis sapiente doloremque molestiae laudantium quas aut, itaque rerum minus natus sed.</p>
</div>
</div>
</div>
</div>
</section>
CSS:
.comments {
p , span{
font-size: 14px;
}
.comment-meta span{
&:after{
content: " | ";
margin:0 15px;
}
&:last-child:after{
content: " ";
margin: 0;
}
}
}