CSS ::before 위치 조정

요소 앞에 가상으로 요소를 만들어 주는 ::before를 사용하는 경우에 위치를 어떻게 조정할 수 있을까?

 

absolute를 사용하여 원하는 위치에 배치할 수 있다. 다만, 아래와 같은 점을 염두하고 사용하는 것이 좋다.

before의 display: absolute 사용시
-top/bottom 속성 값이 없는 경우: static 자리에 위치(before가 위치할 자리)
-top/bottom 속성 값이 있는 경우: absolute를 사용한 일반 요소처럼 relative인 부모 기준으로 정렬됨

 

이해하기 위해서 ::before를 사용한 후 위의 속성들을 변경해보면서 위치를 파악해보면 된다.