::before과 ::after 사용법

carousel indicator에 마우스를 호버 했을 때 설명이 옆으로 튀어나오게 하려고 css 애니메이션을 찾아보다가 ::before과 ::after의 사용법을 알고싶어서 정리를 해보려고 한다.

::before과 ::after은 뭘까?

::before과 ::after은 "가상 요소(pseudo-Element)"로, 별도의 class 를 지정하지 않아도 지정한 것 처럼 요소를 선택할 수 있게 만들어 주는 것이다.

가상 클래스처럼 선택자에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능하다.

라고 나와있다. 하지만 이해가 되지 않아서 더 찾아보았다.

<div>가나다라</div>

가 있을 때, 만약 div::first-letter를 사용한다면, "가"를 감싸고있는 element는 실제로 존재하지 않지만, 그 요소가 있다고 가정하고 첫 번째 글자인 "가"만 조절할 수 있게 된다.

같은 원리로 ::before과 ::after 또한 그 요소의 앞/뒤로 아무것도 없지만 있다고 가정을 하고 콘텐츠를 만들어서 넣어주는 것이다.

::before과 ::after 사용법

.클래스이름::(before또는after){

    (필수)content: ~~~~

    나머지는 동일하게

}

이렇게 함으로써 선택 요소의 앞/뒤에 컨텐츠를 새로 만들 수 있다.