가상선택자 ::before, ::after

::before, ::after

가상 선택자는 실제 html에선 존재하지 않는 속성으로, CSS에서 임의로 생성시켜준다

그 중에서도 ::before과 ::after은 현재 요소의 내용 앞, 뒤에 CSS에 의해 생성되는 자식 요소이며, content 속성과 함께 사용한다

::before

h1::before {
    content: "10살에 곰을 잡은 ";
    color: blue;
}

<h1>토끼공듀</h1>

분명 h1의 내용은 "토끼공듀" 밖에 없었는데 앞에 내용이 추가되었다

이처럼 ::before 선택자는 특정 요소의 내용 앞에 추가적인 내용을 더해준다

::after

h1::after {
    content: "Lv.9999";
    // 텍스트에 linear gradient 적용 코드
}

<h1>토끼공듀</h1>

지금보니까 원본은 2000레벨이고 닉네임이 무지개색이지만 아무튼 상관없다

h1의 내용인 “토끼공듀" 뒤에 내용이 추가되는 것을 볼 수 있다

이처럼 ::after 선택자는 특정 요소의 내용 뒤에 추가적인 내용을 더해준다

사용처

구분자가 필요할 때 ( 컨텐츠1 | 컨텐츠2 | 컨텐츠3 )

요소 앞뒤에 추가적인 내용을 간단하게 붙이고 싶을 때

float된 블록 컨텐츠의 float을 해제할 때 (clear: both;)

굳이 content 속성에 아무것도 넣지 않아도 여러 스타일을 더 적용할 때 사용한다

익숙해지는 데 좀 걸릴 것 같다