:: 마지막 애님 요소의 after after pseudo-element의 내용

Question

<span> 요소에서 ::after 의사 요소의 내용을 제거하려고합니다. 나는 다른 사람들과 잘 할 수 있었지만 왜 이것이 제대로 작동하지 않는지 잘 모르겠습니다.

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