표 5-2 가상 요소 선택자
|
종류 |
설명 |
|
::before |
콘텐츠 앞의 공간을 선택합니다. |
|
::after |
콘텐츠 뒤의 공간을 선택합니다. |
::before 선택자는 기준 선택자 요소 앞의 공간을 선택하고, ::after 선택자는 기준 선택자 요소 뒤의 공간을 선택합니다. 다음 코드에 사용한 content 속성은 ::before 선택자와 ::after 선택자에서만 사용하는 속성으로, 새로운 콘텐츠를 만들거나 추가할 때 사용합니다.
05/03/before_after.html
<style>
p::before{
content:'<before>';
}
p::after{
content:'<after>';
}
</style>
(중략)
<p>Lorem, ipsum dolor.</p>
그림 5-3 실행결과