[CSS] ::after에 대해서

 

오늘도 클론코딩을 연습합니다. 

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

엇? CSS코드에서 가끔 보긴했는데 이 ::after는 뭘까요? 

 

 

오늘은 가상요소(::)에 대해 알아봅시다! 

 

가상요소(Pseudo-Element)란?

선택자에 추가하는 키워드로 선택한 요소의 지정된 부분에 스타일을 입힐 수 있습니다. 

예를 들어, 요소의 내용 앞이나 뒤에 내용을 추가하거나, 요소의 첫글자 혹은 줄 스타일을 지정할 수 있습니다. 

 

 

가상 요소의 종류 

선택자(selector)	예시	설명
::before	p::before	선택한 요소의 바로 앞에 다른 요소를 삽입합니다.
::after	p::after	선택한 요소의 바로 뒤에 다른 요소를 삽입합니다.
::first-letter	::first-letter	각 요소의 첫 글자를 선택합니다.
::first-line	p::first-line	각 요소의 첫 번째 줄을 선택합니다.

더 많은 가상요소를 찾고 싶으면 mdn사이트를 보시면 됩니다! 

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

 

 

 

::after

위에서 언급한 것처럼, 선택한 요소의 바로 뒤에 다른 요소를 삽입할 수 있습니다. 

이 다른 요소는  content 속성을 사용해서 추가할 수 있습니다. 

 

 

 

마치 늦게라도 아이디어가 떠오를때 쓸 수 있는 기능이군요!

오늘도 하나 알게 되었습니다!