CSS 가상 요소(pseudo-elements)는 웹 요소의 특정 부분을 선택하여 스타일을 적용하기 위한 가상의 요소입니다. 가상 요소는 선택자와 함께 사용되며, 선택한 요소의 내용(content) 중 일부를 스타일링하거나 새로운 콘텐츠를 생성할 수 있습니다. 두 가지 주요 가상 요소가 있습니다: ::before와 ::after.
::before:
- ::before는 선택한 요소의 시작 부분에 가상 요소를 삽입합니다.
- 새로운 콘텐츠를 생성하거나 이미지, 아이콘 등을 추가하는 데 사용됩니다.
- 예를 들어, 다음 코드는 모든 '
<p>' 요소의 앞에 "✦"을 추가합니다:
p::before {
content: "✦ ";
}::after:
- ::after는 선택한 요소의 끝 부분에 가상 요소를 삽입합니다.
- 주로 추가적인 콘텐츠나 아이콘을 요소의 끝에 추가하는 데 사용됩니다.
- 예를 들어, 다음 코드는 링크 요소('
<a>') 뒤에 화살표 아이콘을 추가합니다:
a::after {
content: " ➜";
}가상 요소를 사용할 때 'content' 속성을 사용하여 가상 요소에 표시할 콘텐츠를 지정할 수 있습니다. 그리고 다른 CSS 속성을 사용하여 가상 요소에 스타일을 적용할 수 있습니다. 이를 통해 디자인 요소나 장식적인 콘텐츠를 추가하거나 원래 요소의 특정 부분을 스타일링할 수 있습니다.
가상 요소는 웹 디자인에서 많이 사용되며, 주로 아이콘, 장식적인 요소, 코드 라인 번호 등을 추가하기 위해 활용됩니다.
