CSS 예제 17 / 20
::before/::after 는 HTML을 건드리지 않고 CSS만으로 콘텐츠를 추가합니다. content 속성이 핵심이에요.
::before
::after
:nth-child
:hover
💡 이렇게 바꿔보세요
content: "" (빈 문자열)만 줘도 아이콘·장식용 도형을 그릴 수 있어요 — 뱃지의 동그라미처럼:nth-child(odd)/:nth-child(even) 로 표·목록에 줄무늬 배경을 쉽게 줘요::before/::after 는 실제 DOM에는 없어서 JS의 querySelector 로 선택되지 않아요
← CSS 예제 목록