[css] 가상 요소 선택자

[css] 가상 요소 선택자

22 Dec 2023

css

`::before` 및 `::after`

일반적으로 content 속성과 함께 사용되며, 요소의 시작 또는 끝에 콘텐츠를 추가할 수 있습니다. 이를 통해 예를 들어 아이콘, 문자 또는 장식 요소를 삽입할 수 있습니다.

.element::before {
  content: "이전: ";
}

.element::after {
  content: " (이후)";
}

`::first-line` 및 `::first-letter`

텍스트 요소의 첫 줄 또는 첫 글자에 스타일을 적용하는 데 사용됩니다.

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 150%;
}

가상 선택자를 사용하여 꾸밈 요소를 만들거나, 특정 텍스트 부분에 스타일을 적용할 수 있습니다. 또한 ::before 및 ::after 가상 요소는 콘텐츠를 동적으로 생성하거나 장식적인 콘텐츠를 추가하는 데 유용하게 사용됩니다.

참고 자료

MDN Web Docs: 가상 요소 선택자