before, after

W3C 스펙에서

::before - 실제 내용 바로 앞에 생성되는 자식요소

::after    - 실제 내용 바로 뒤에 생성되는 자식요소 라고 일컷는다.

 

이 두가지를 사용하기 위해서는 만드시 content="" 라는 속성이 필요하다.

 

<div>안녕하세요</div>

<style>
div::before {
    content:' 앞에 붙는다 - ';
}
div::after {
    content:' - 뒤에 붙는다.';
}
</style>

결과

 

before, after은 inline형태로 되며, 

특성상 width, height가 먹지 않고, padding/margin은 좌우 영역만 조절된다.

 

즉, 

<div>
 <span>앞에 붙는다 - </span>
 안녕하세요
 <span> - 뒤에 붙는다.</span>
</div>


위와 같이 div 앞뒤로 inline 속성인 span이 붙는거와 같다