Удаление :: после содержимого псевдоэлемента из последнего элемента span

Question

Я пытаюсь удалить содержимое псевдоэлемента ::after с последнего элемента <span>. Мне удалось сделать это хорошо с другими, но я не уверен, почему этот не работает должным образом.

http://jsfiddle.net/L6d6w1ys/

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; 
       } 
      } 
     } 

Answer 1

Это не работает, потому что селектор span:last-child не будет выбрать любой <span> элемент.

Предполагая разметку, не<span> элемента не является последнего ребенком своего родителя.

Попробуйте использовать :last-of-type вместо:

.comments { 
    p , span{ 
     font-size: 14px; 
    } 
    .comment-meta span { 
     &:after { 
      content: " | "; 
      margin:0 15px; 
     } 
     &:last-of-type:after { 
      content: none; 
      margin: 0; 
     } 
    } 
}