img 태그는 가상요소 선택자를 쓸 수 없다. !

<a class="list_link" href="">
  <div class="img_box">
    <img src="./cat.jpg" alt="">
  </div>
  <div class="info">
    <span class="category">산악스키</span>
    <p class="info_title" >산악스키내용 산악스키내용 산악스키내용 산악스키내용 산악스키내용</p>
  </div>
</a>

부스트코스 웹UI 활용편을 듣던 중 이미지 dimmed처리를 하는 수업인데 위와 같은 마크업을 했는데 문득 img태그는 inline-block이고 div.img_box는 block 속성인데 굳이 중복해서 블록 속성을 해야할까? 싶었다. 그래서 div.img_box를 제거하고 마크업을 다시했다.

정상적으로 위와 같이 마크업을 하면 수업과 똑같이 내용이 나온다.

하지만

<a class="list_link" href="">
  <img class="img_box" src="./cat.jpg" alt="">
      <div class="info">
        <span class="category">산악스키</span>
        <p class="info_title" >산악스키내용 산악스키내용 산악스키내용 산악스키내용 산악스키내용</p>
  </div>
</a>

위와 같이 div.img_box를 제외하고 마크업을 했을때에는

위와같이 레이아웃에는 문제가 되지 않지만 dimmed처리가 되지 않는다.

구글링 해보니까

img 태그같이 닫는 태그가 없는 태그들은 :before :after와 같은 가상요소를 사용 할 수 없다고 한다.

또 추가적으로 가상요소는 레이아웃에 영향을 미치지 않는것 같다.