(css) 가상요소를 이용한 이미지 테두리

이미지 배경색과 같은 테두리효과 설정

/*html*/
<aside class="ad-area">
     <a href="" class="thumb-bd">
          <img src="./assets/images/ad2.jpg" alt="">
     </a>
</aside>

/*css*/
.thumb-bd{
    display: block;
    position: relative;
}
.thumb-bd::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #000;
    opacity: 0.1;
    content: '';
}

• ::before(가상요소)는 inline 속성
  이미지에 들어갈 수 없으므로,
  1. div태그로 묶기
  2. a태그에 block 속성 부여하여 사용