CSS | 가상요소 before after 예제

가상 요소(pseudo-element)란

의미 없는 태그를 작성하지 않고 가상으로 처리가 가능한 기능

예제

span {
      font-size: 13px;
      letter-spacing: 1.42px;
      position: relative;

      &: after {
        content: "";
        height: 2px;
        background: white;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        opacity: 0;
        transform-origin: left center;
        transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        transform: scaleX(0);
      }
    }

content:""; : 가상선택자에 필수로 들어가는 요소.
텍스트 내용이 있으면 따옴표 안에 내용을 넣고 아니라면 따옴표만 넣기.
가상선택자는 부피가 없기 때문에 필요한 만큼 너비와 높이를 꼭 지정.