[css] after pseudo-class

after pseudo class의 Usage를 기록

1. 영역이 선택되지 않도록 하기위한 wrapper 역할

상황 : resize bar를 잡고, window 사이즈를 조절하려고 할때, 마우스를 빨리 움직이면, iframe영역으로 들어가면 포인트가 iframe에 잡혀서, drag event를 잃게 된다.
(아래는 참고 이미지: resize-bar를 클릭한 상태에서 빨간색 방향으로 마우스를 빠르게 움직이는 상황)

해결방법 : iframe에 after pseudo-class를 적용하여, iframe영역에 들어가더라도 after로 덮어져있어서 event를 잃지 않게 된다.

/* 
fix resize bug when entering into iframe
  react-draggable-transparent-selection : resize-bar를 클릭(active혹은 focus)하고 있을 때, 발생하는 class이다. 
  preview-wrapper : iframe을 감싸고 있는 div이다.
*/
.react-draggable-transparent-selection .preview-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}