CSS_가상요소(After,Before)

▶After

 

*HTML

<div class="box">
   Content!
</div>

 

*CSS

box::after{
   content : "뒤!" ;
}

 

*출력내용

Content!뒤!

 

요소를 뒤에 삽입하는 기능으로서 어떤 내용을 삽입할지 반드시 기입해주어야한다.

 

▶Before

 

*HTML

<div class="box">
   Content!
</div>

 

*CSS

box::before{
   content : "앞!" ;
}

 

*출력내용

앞!Content!

 

요소를 앞에 삽입하는 기능으로서 어떤 내용을 삽입할지 반드시 기입해주어야한다.

 

 

***After와 Before 모두 width,height와 같은 속성을 만들 수 있다. 단, 가상요소는 inline형태로서 display = block;으로 block요소로 변경해주어야한다.