[5편] 가상 요소가 안 보일 때 확인할 5가지: 실수 체크리스트

2026년 10월 13일

한 줄 요약

::before, ::after가 안 보일 때의 원인은 거의 정해져 있습니다. content, display, 기준 상자, z-index, 붙일 수 없는 태그 순서로 점검하세요.

비유로 이해하기

전등이 안 켜지면 순서대로 확인합니다. 전구가 있나? 스위치를 켰나? 전기가 들어오나? 가상 요소도 점검 순서만 알면 금방 고칠 수 있어요.

1. content가 있나요? 빈 장식이라도 content: ""는 꼭 있어야 합니다. 없으면 상자 자체가 생기지 않아요.
2. 크기를 줬는데 안 보이나요? 가상 요소는 기본이 글자처럼 흐르는 inline이라 width, height가 먹지 않습니다. display: block이나 inline-block, 또는 position: absolute를 주세요.
3. 엉뚱한 곳에 나타나나요? absolute로 놓았다면 부모에 position: relative(말뚝)가 있는지 확인하세요.
4. 뒤에 숨어 버렸나요? z-index: -1을 줬는데 부모에 배경색이 있으면 그 뒤로 숨습니다. 부모에 z-index: 0(새 묶음)을 주세요.
5. 붙일 수 없는 태그인가요? img, input처럼 안에 내용을 담지 않는 태그에는 ::before, ::after가 붙지 않습니다. 감싸는 div에 붙이세요.

아래 네 개의 상자는 각각 점검표 1~4번의 실수 때문에 장식이 안 보입니다. 코드 주석의 힌트대로 한 줄씩 고쳐서 초록 원이 모두 보이게 만들어 보세요.

직접 고쳐 보세요 · 주석 힌트대로 고쳐 보세요

GenerateBlocks로 만든 장식이 안 보일 때도 이 순서대로 확인하세요. 특히 3번(부모 Position Relative)과 4번(z-index)은 GenerateBlocks 스타일 패널에서 바로 고칠 수 있는 항목입니다.