요소의 특정 부분이나 가상 조각을 꾸밉니다.
::before와 ::after는 요소 내부에 장식 조각을 만들고 ::first-letter, ::selection, ::marker는 특정 부분을 선택합니다. 핵심 콘텐츠는 HTML에 두고 가상 요소는 장식에 사용합니다.
이번 예제의 출발점은 .target::before { content: ""; }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 before를 after로 바꾸고 위치를 오른쪽으로 옮기세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
content로 중요한 텍스트를 넣으면 복사, 번역, 접근성에서 누락될 수 있습니다.
직접 바꿔보세요before를 after로 바꾸고 위치를 오른쪽으로 옮기세요.