한 줄 요약
빈 ::before나 ::after를 글자 뒤에 깔면 형광펜 강조나, 마우스를 올리면 늘어나는 밑줄 같은 효과를 HTML 추가 없이 만들 수 있습니다.
비유로 이해하기
책에 칠하는 형광펜은 글자를 가리지 않고 글자 뒤에 깔립니다. 가상 요소도 내용이 비어 있는 상자(content: "")를 만들어 글자 뒤에 깔 수 있어요.
핵심은 세 가지입니다. 글자를 감싼 요소에 position: relative를 주고, 가상 요소를 position: absolute로 원하는 위치에 놓고, z-index: -1로 글자 뒤로 보냅니다. position 시리즈에서 배운 공식이 그대로 쓰여요.
비교해 보기
- 배경색 강조(
background): 글자 줄 전체가 색으로 덮여 다소 무거워 보입니다. - 가상 요소 형광펜: 글자 아래쪽 절반만 칠하는 등 모양을 자유롭게 정할 수 있습니다.
- 밑줄 애니메이션: 평소에는 너비 0, 마우스를 올리면(
:hover) 너비 100%로 늘어나게 만듭니다. 가상 클래스와 가상 요소의 조합이에요.
직접 실행해 보기
형광펜의 height를 40%에서 100%로, 색을 다른 색으로 바꿔 보세요. 아래 링크에 마우스를 올리면 밑줄이 늘어납니다. transition 시간을 1s로 바꾸면 천천히 늘어나요.
GenerateBlocks에서는
독립학교 홈의 메인 제목 “성장 도구” 강조는 배경 그라데이션으로 만들었지만, 같은 효과를 ::before로도 만들 수 있습니다. GenerateBlocks에서 링크나 버튼에 hover 효과를 줄 때도 “평소 상태 + :hover 상태”를 나눠 설정하는 원리는 같아요.
참고: 코남: ::before, ::after로 형광펜효과 만들기 (영상) · Kevin Powell: part three, as design elements (영상) · MDN: ::after